/*
 * SNS Stats — Design Overhaul
 * Da aggiungere come ULTIMO <link> in index.html
 * Non sovrascrive i file esistenti: override mirati via specificità/cascade
 *
 * Palette:
 *   Primario:    #0f2847  (Blu notte — football/autorità)
 *   Accento:     #e8a020  (Oro ambra — energia, premi)
 *   Superficie:  #f4f6f9  (Grigio chiaro perla)
 *   Testo:       #1a1a2e
 *   Muted:       #6b7280
 *   Bordo:       oklch(0.3 0.02 240 / 0.12)
 *
 * Font: Inter (body) + Barlow Condensed (display/caps)
 */

/* ─── 0. IMPORT FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap');

/* ─── 1. TOKENS ───────────────────────────────────────────────── */
:root {
  --sns-navy:        #0f2847;
  --sns-navy-mid:    #1a3a5c;
  --sns-navy-light:  #2a5298;
  --sns-gold:        #e8a020;
  --sns-gold-hover:  #d4911a;
  --sns-gold-muted:  rgba(232,160,32,.15);
  --sns-red:         #c0392b;
  --sns-green:       #27ae60;
  --sns-bg:          #f4f6f9;
  --sns-surface:     #ffffff;
  --sns-surface-2:   #f0f3f8;
  --sns-border:      rgba(15,40,71,.10);
  --sns-border-mid:  rgba(15,40,71,.18);
  --sns-text:        #1a1a2e;
  --sns-muted:       #6b7280;
  --sns-faint:       #adb5bd;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --sh-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --sh-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --sh-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);

  --font-display: 'Barlow Condensed', 'Roboto', sans-serif;
  --font-body:    'Inter', 'Roboto', sans-serif;

  --transition: 160ms cubic-bezier(.16,1,.3,1);
}

/* ─── 2. BASE RESET / BODY ─────────────────────────────────────── */
body {
  font-family: var(--font-body) !important;
  background-color: var(--sns-bg) !important;
  color: var(--sns-text) !important;
  -webkit-font-smoothing: antialiased;
}

/* ─── 3. NAVBAR ────────────────────────────────────────────────── */
.navbar.navbar-fixed,
ul.navbar.navbar-fixed {
  background: var(--sns-navy) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
  padding: 0 !important;
  border-bottom: 2px solid var(--sns-gold) !important;
}

.navbar.navbar-fixed .nav-item,
ul.navbar.navbar-fixed a.nav-item {
  color: rgba(255,255,255,.82) !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  padding: 14px 14px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border-bottom: 3px solid transparent !important;
  transition: color var(--transition), border-color var(--transition), background var(--transition) !important;
  text-transform: uppercase !important;
}

.navbar.navbar-fixed .nav-item:hover,
ul.navbar.navbar-fixed a.nav-item:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border-bottom-color: rgba(232,160,32,.5) !important;
}

.navbar.navbar-fixed .nav-item.active,
ul.navbar.navbar-fixed a.nav-item.active {
  color: var(--sns-gold) !important;
  background: rgba(232,160,32,.08) !important;
  border-bottom-color: var(--sns-gold) !important;
  font-weight: 700 !important;
}

/* Pulsante LIVE — mantieni effetto pulsante ma più elegante */
.nav-item[data-target="LiveStats"] {
  background: transparent !important;
  border: none !important;
  color: #ff6b6b !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  animation: sns-pulse-live 2.2s ease-in-out infinite !important;
}
.nav-item[data-target="LiveStats"].active {
  color: #ff4444 !important;
  background: rgba(255,68,68,.10) !important;
  animation: none !important;
}
@keyframes sns-pulse-live {
  0%,100% { opacity:1; }
  50%       { opacity:.65; }
}

/* Navbar interna (sottosezioni) */
.navbar-inside {
  background: var(--sns-navy-mid) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: 0 !important;
  gap: 0 !important;
}
.navbar-inside .nav-item {
  font-size: 0.78rem !important;
  padding: 10px 14px !important;
  color: rgba(255,255,255,.70) !important;
  border-bottom: 2px solid transparent !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.navbar-inside .nav-item:hover  { color:#fff !important; background: rgba(255,255,255,.06) !important; }
.navbar-inside .nav-item.active { color: var(--sns-gold) !important; border-bottom-color: var(--sns-gold) !important; background: rgba(232,160,32,.07) !important; font-weight:700 !important; }

/* Dropdown mobile */
select.navbar-toggle,
select.nav-select {
  background: var(--sns-navy) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  width: calc(100% - 24px) !important;
  margin: 8px 12px !important;
}

/* ─── 4. ARTICLE / MAIN WRAPPER ────────────────────────────────── */
article.box-score.football {
  background: transparent !important;
  padding-top: 56px !important; /* spazio per navbar fixed */
}

/* ─── 5. SEZIONI PANEL ─────────────────────────────────────────── */
section.panel, section.content.active {
  background: transparent !important;
}

/* ─── 6. BOX SCORE HEADER (scoreboard) ────────────────────────── */
figure.box-score-header {
  background: var(--sns-surface) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-md) !important;
  padding: 24px 32px !important;
  margin: 16px 0 !important;
  border: 1px solid var(--sns-border) !important;
}

.box-score-graphic {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
}

.box-score-graphic .team {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.box-score-graphic .score {
  font-family: var(--font-display) !important;
  font-size: 3.2rem !important;
  font-weight: 800 !important;
  color: var(--sns-navy) !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
}

.box-score-graphic .score.winner {
  color: var(--sns-navy) !important;
  text-shadow: 0 2px 12px rgba(15,40,71,.2) !important;
}
.box-score-graphic .score.loser {
  color: var(--sns-muted) !important;
}

.box-score-graphic .bracket {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--sns-muted) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 0 8px !important;
}

.main-heading {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--sns-navy) !important;
  letter-spacing: .04em !important;
  margin: 16px 0 8px !important;
}

figcaption { border: none !important; }

/* ─── 7. TABELLE ───────────────────────────────────────────────── */
.sidearm-table {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  border-collapse: collapse !important;
  width: 100% !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--sh-sm) !important;
  border: 1px solid var(--sns-border) !important;
  background: var(--sns-surface) !important;
}

/* Caption (titolo tabella) */
.sidearm-table caption,
.box-score table caption {
  font-family: var(--font-display) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  background: var(--sns-navy) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-bottom: 2px solid var(--sns-gold) !important;
  text-align: left !important;
  caption-side: top !important;
}

/* Header */
.sidearm-table thead th {
  background: var(--sns-surface-2) !important;
  color: var(--sns-navy) !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 8px 10px !important;
  border-bottom: 2px solid var(--sns-border-mid) !important;
  border-right: none !important;
  font-style: normal !important;
  color: var(--sns-muted) !important;
}

/* Righe */
.sidearm-table tbody tr td,
.sidearm-table tbody tr th {
  padding: 7px 10px !important;
  color: var(--sns-text) !important;
  border: none !important;
  border-bottom: 1px solid var(--sns-border) !important;
  font-size: 0.875rem !important;
  vertical-align: middle !important;
  background: transparent !important;
}

.sidearm-table tbody tr th[scope="row"],
.sidearm-table tbody tr th:not([scope="col"]) {
  font-weight: 600 !important;
  color: var(--sns-navy) !important;
}

/* Zebra leggera */
.sidearm-table tbody tr:nth-child(even) td,
.sidearm-table tbody tr:nth-child(even) th {
  background: rgba(15,40,71,.025) !important;
}

/* Hover */
.sidearm-table.highlight-hover tbody tr:not(thead):hover td,
.sidearm-table.highlight-hover tbody tr:not(thead):hover th {
  background: var(--sns-gold-muted) !important;
}

/* Footer totali */
.sidearm-table tfoot tr,
.sidearm-table tfoot tr:nth-child(odd),
.sidearm-table tfoot tr:nth-child(even) {
  background: var(--sns-navy) !important;
}
.sidearm-table tfoot th,
.sidearm-table tfoot td {
  background: var(--sns-navy) !important;
  color: rgba(255,255,255,.9) !important;
  font-weight: 700 !important;
  border: none !important;
  border-top: 2px solid var(--sns-gold) !important;
  padding: 8px 10px !important;
  font-size: 0.875rem !important;
}

/* Header raggruppamento (colgroup) */
.sidearm-table tbody tr th[scope="colgroup"] {
  background: var(--sns-gold-muted) !important;
  color: var(--sns-navy) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-size: 0.72rem !important;
}

/* Ordinamento */
.sortable-table thead th:not(:empty):not(.text-hide):hover {
  background: var(--sns-gold-muted) !important;
  color: var(--sns-navy) !important;
  cursor: pointer !important;
  border-radius: 0 !important;
}

/* Emphasize */
.sidearm-table tbody tr td.emphasize,
.sidearm-table tbody tr th.emphasize,
.box-score table tr.emphasize,
.box-score table td.emphasize {
  background: var(--sns-gold-muted) !important;
  font-weight: 700 !important;
}

/* Plays */
.plays td.emphasize.primary {
  background: var(--sns-navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* ─── 8. SCORE QUARTER TABLE ───────────────────────────────────── */
#score-qrt-table,
#live-score-qrt-table {
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  margin-top: 16px !important;
}
#score-qrt-table thead th,
#live-score-qrt-table thead th {
  background: var(--sns-navy) !important;
  color: rgba(255,255,255,.75) !important;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  letter-spacing: .08em !important;
}
#score-qrt-table thead th:first-child,
#live-score-qrt-table thead th:first-child {
  text-align: left !important;
}
#score-qrt-table tbody td:last-child,
#score-qrt-table tbody td.emphasize,
#live-score-qrt-table tbody td:last-child {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--sns-navy) !important;
  background: var(--sns-gold-muted) !important;
}

/* ─── 9. SEZIONE HEADER / sub-heading ─────────────────────────── */
h4.sub-heading,
h3.sub-heading {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--sns-navy) !important;
  margin: 24px 0 12px !important;
  padding-left: 12px !important;
  border-left: 4px solid var(--sns-gold) !important;
}

h5.sub-heading {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--sns-navy-mid) !important;
  margin: 16px 0 8px !important;
}

/* ─── 10. BADGE LIVE ───────────────────────────────────────────── */
.badge.badge-live,
.badge-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #c0392b !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  padding: 3px 9px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  animation: sns-live-blink 1.4s ease-in-out infinite !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
}
.badge-live::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  background: #fff !important;
  border-radius: 50% !important;
  display: inline-block !important;
  animation: sns-dot-pulse 1.4s ease-in-out infinite !important;
}
@keyframes sns-live-blink {
  0%,100% { opacity:1; }
  50%      { opacity:.75; }
}
@keyframes sns-dot-pulse {
  0%,100% { transform:scale(1); opacity:1; }
  50%      { transform:scale(1.4); opacity:.6; }
}

/* ─── 11. SECTION-HEADER (Live section) ───────────────────────── */
.section-header.live-stats-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding: 16px 0 8px !important;
  border-bottom: 2px solid var(--sns-border) !important;
}

/* ─── 12. PLAY-BY-PLAY ─────────────────────────────────────────── */
.down-distance {
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--sns-navy) !important;
  white-space: nowrap !important;
  background: var(--sns-surface-2) !important;
  padding: 6px 12px !important;
  border-radius: var(--r-sm) 0 0 var(--r-sm) !important;
  border-right: 3px solid var(--sns-gold) !important;
}
.play-desc {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: var(--sns-text) !important;
  padding: 6px 12px !important;
}
#live-plays-table tbody tr,
.plays tbody tr {
  border-bottom: 1px solid var(--sns-border) !important;
  transition: background var(--transition) !important;
}
#live-plays-table tbody tr:hover,
.plays tbody tr:hover {
  background: var(--sns-gold-muted) !important;
}

/* ─── 13. PULSANTI ─────────────────────────────────────────────── */
.btn.btn-primary,
button.btn-primary {
  background: var(--sns-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 10px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  box-shadow: var(--sh-sm) !important;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !important;
  cursor: pointer !important;
}
.btn.btn-primary:hover,
button.btn-primary:hover {
  background: var(--sns-navy-mid) !important;
  box-shadow: var(--sh-md) !important;
  transform: translateY(-1px) !important;
}
.btn.btn-secondary,
button.btn-secondary {
  background: transparent !important;
  color: var(--sns-navy) !important;
  border: 1.5px solid var(--sns-border-mid) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: border-color var(--transition), background var(--transition) !important;
  cursor: pointer !important;
}
.btn.btn-secondary:hover { border-color: var(--sns-navy) !important; background: var(--sns-surface-2) !important; }

/* ─── 14. GENERAL INFO DL ──────────────────────────────────────── */
dl.inline#general-info {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px 24px !important;
  font-size: 0.8rem !important;
  color: var(--sns-muted) !important;
  margin: 8px 0 16px !important;
  font-family: var(--font-body) !important;
}

/* ─── 15. SCORING SUMMARY ──────────────────────────────────────── */
#ScoringSummary-table caption {
  background: var(--sns-navy-mid) !important;
}

/* ─── 16. DRIVE CHART ──────────────────────────────────────────── */
#allDrivesTable caption,
#HomeDrivesTable caption,
#AwayDrivesTable caption {
  background: var(--sns-navy-mid) !important;
}

/* ─── 17. ROW LAYOUT spacing ───────────────────────────────────── */
.row.pad { padding: 12px 16px !important; }
.box-score table.overall-stats { margin-top: 24px !important; }

/* ─── 18. DATATABLEWRAPPER ─────────────────────────────────────── */
.dataTablewrapper,
.dataTableswrapper {
  background: var(--sns-surface) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  border: 1px solid var(--sns-border) !important;
}

/* ─── 19. WELCOME SECTION ──────────────────────────────────────── */
#welcome-section {
  min-height: 100vh !important;
  background: linear-gradient(135deg, var(--sns-navy) 0%, #1a3a6c 60%, #0d1f3c 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px !important;
}
#welcome-section img {
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.4)) !important;
  margin-bottom: 32px !important;
}

.welcome-frame {
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.4) !important;
  padding: 36px 40px !important;
  max-width: 520px !important;
  width: 100% !important;
  animation: none !important;
}
.welcome-frame::before { display: none !important; }

.welcome-header h2 {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  color: #fff !important;
  text-shadow: none !important;
  margin-bottom: 24px !important;
  text-transform: uppercase !important;
}

.welcome-content p,
.welcome-content .invitation {
  color: rgba(255,255,255,.70) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  font-style: normal !important;
}

.btn-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: var(--sns-gold) !important;
  color: var(--sns-navy) !important;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 4px 16px rgba(232,160,32,.35) !important;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
  text-decoration: none !important;
  border: none !important;
  margin-bottom: 12px !important;
}
.btn-stats:hover {
  background: var(--sns-gold-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(232,160,32,.45) !important;
  color: var(--sns-navy) !important;
  text-decoration: none !important;
}
.btn-stats:active {
  transform: translateY(0) !important;
}
.btn-stats::after { display: none !important; }
.btn-icon { font-size: 1.1rem !important; }

.button-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 20px !important;
  width: 100% !important;
}

/* ─── 20. FOOTER ───────────────────────────────────────────────── */
footer {
  background: var(--sns-navy) !important;
  color: rgba(255,255,255,.6) !important;
  height: auto !important;
  padding: 16px !important;
}
footer p {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: rgba(255,255,255,.5) !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  padding: 0 !important;
}

/* ─── 21. LOGO SQUADRE ─────────────────────────────────────────── */
.team img,
#homeLogo, #awayLogo,
#live-homeLogo, #live-awayLogo {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)) !important;
}
.live-logo-image {
  max-height: 80px !important;
  object-fit: contain !important;
}

/* ─── 22. MAIN CONTENT PLACEHOLDER ────────────────────────────── */
.main-content-placeholder {
  padding: 0 16px 40px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* ─── 23. RESPONSIVE ───────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .welcome-frame  { padding: 24px 20px !important; }
  .welcome-header h2 { font-size: 1.2rem !important; }
  .box-score-graphic .score { font-size: 2.4rem !important; }
  figure.box-score-header { padding: 16px !important; }
  h4.sub-heading { font-size: 0.95rem !important; }
  .sidearm-table thead th { font-size: 0.68rem !important; }
  .sidearm-table tbody tr td,
  .sidearm-table tbody tr th { font-size: 0.82rem !important; padding: 6px 8px !important; }
}