/* Archivio storico pubblico (ArchivioController) — CSS indipendente dal
   bundle della SPA React, stessa palette del sito (vedi frontend/src/index.css)
   ma senza dipendere dai suoi hash di build. */

/* Stessi font self-hosted della SPA (vedi frontend/src/index.css) — url
   assoluto verso retrofc.it perché questo file viene servito anche
   dall'host delle API (dove /fonts/... non esiste), sia in produzione che
   in locale via il proxy .htaccess/vite. */
@font-face {
  font-family: 'Jersey 10';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://retrofc.it/fonts/jersey-10-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jersey 10';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://retrofc.it/fonts/jersey-10-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://retrofc.it/fonts/press-start-2p-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://retrofc.it/fonts/press-start-2p-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --bg: #101114;
  --surface: #17181c;
  --surface-muted: #1e1f24;
  --surface-hover: #26272d;
  --border: #2b2c32;
  --text: #f2f2f3;
  --text-muted: #9a9ba3;
  --accent: #34a374;
  --accent-contrast: #06170f;
  --oro: #e0b843;
  --oro-cupo: #a9821f;
  --oro-contrasto: #1c1408;
  --danger: #c0392b;
  --overlay: rgba(0, 0, 0, 0.65);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --teletext: 'Jersey 10', 'Courier New', monospace;
  --pixel: 'Press Start 2P', 'Courier New', monospace;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 20px/1.5 var(--teletext);
}

/* Link bianchi, oro solo al passaggio del mouse — l'oro resta riservato
   agli elementi davvero "attivi" (titoli di sezione, voce spy corrente,
   pulsanti CTA). */
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--oro); text-decoration: underline; }

.arc-breadcrumb {
  max-width: 880px;
  margin: 16px auto 0;
  padding: 0 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.arc-breadcrumb__sep { margin: 0 6px; }

.arc-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Pagine con menu spy (es. stagione.blade.php) hanno bisogno di più spazio
   per la colonna laterale — vince solo se .arc-layout-con-spy è presente. */
.arc-main:has(.arc-layout-con-spy) {
  max-width: 1100px;
}

.arc-main h1 {
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 12px;
}

.arc-intro {
  color: var(--text-muted);
  font-size: 16px;
  margin: 0 0 28px;
}

.arc-sezione {
  margin: 0 0 32px;
  scroll-margin-top: 16px;
}

.arc-sezione h2 {
  font-size: 20px;
  color: var(--oro);
  margin: 0 0 12px;
}

.arc-sottotitolo {
  font-size: 15px;
  margin: 18px 0 8px;
  color: var(--text);
}

.arc-scudetto {
  vertical-align: -3px;
  margin-right: 6px;
}

.arc-layout-con-spy {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 32px;
  align-items: start;
}

.arc-spy {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.arc-spy a {
  color: var(--text-muted);
  font-size: 13px;
  padding: 6px 10px;
  border-left: 2px solid var(--border);
  text-decoration: none;
}

.arc-spy a:hover {
  color: var(--text);
}

.arc-spy a.is-active {
  color: var(--oro);
  border-left-color: var(--oro);
  font-weight: 600;
}

@media (max-width: 780px) {
  .arc-layout-con-spy {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .arc-spy {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 4px;
  }

  .arc-spy a {
    border-left: none;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
  }

  .arc-spy a.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--oro);
  }
}

.arc-nota {
  color: var(--text-muted);
  font-size: 13px;
  margin: -6px 0 10px;
}

.arc-tabella-scroll { overflow-x: auto; }

.arc-tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.arc-tabella th,
.arc-tabella td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.arc-tabella th:nth-child(2),
.arc-tabella td:nth-child(2) {
  text-align: left;
}

.arc-tabella thead th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

/* Tabella "Risultati della stagione" (squadra-stagione.blade.php): qui è la
   3ª colonna (l'avversario) a dover restare a sinistra, non la 2ª. */
.arc-tabella--risultati th:nth-child(2),
.arc-tabella--risultati td:nth-child(2),
.arc-tabella--risultati th:nth-child(3),
.arc-tabella--risultati td:nth-child(3) {
  text-align: left;
}

/* Pagina giocatore (giocatore.blade.php): tabella "Carriera" e lista "Le
   partite migliori" più leggibili a 16px (invece dei 14px della tabella e
   dei 20px ereditati dal body per la lista — così combaciano). Scoping via
   #carriera/#partite-migliori (id delle rispettive <section>, non nuove
   classi) per non toccare le altre tabelle/liste che riusano .arc-tabella/
   .arc-lista-classifica altrove (classifica, risultati, capocannonieri...).
   La 1ª colonna "Stagione" era a destra e larga ~195px per un contenuto di
   ~9 caratteri (il layout automatico della tabella le distribuiva lo spazio
   libero) — qui a sinistra e dimezzata abbondantemente. */
#carriera .arc-tabella {
  font-size: 16px;
}

#carriera .arc-tabella th:first-child,
#carriera .arc-tabella td:first-child {
  text-align: left;
  width: 100px;
}

#partite-migliori .arc-lista-classifica {
  font-size: 16px;
}

/* Pagina squadra-stagione (squadra-stagione.blade.php): tabelle "Rosa" e
   "Risultati della stagione" a 16px, 1ª colonna sempre a sinistra (era a
   destra di default — corretto per i numeri ma sbagliato qui: in "Rosa" la
   1ª colonna è il nome del giocatore, non un numero). "Giornata" (1ª colonna
   di "Risultati") resta un numero, ma va da 1 a 38: non le serve una colonna
   larga quanto le altre. */
#rosa .arc-tabella,
#risultati .arc-tabella {
  font-size: 16px;
}

#rosa .arc-tabella th:first-child,
#rosa .arc-tabella td:first-child,
#risultati .arc-tabella th:first-child,
#risultati .arc-tabella td:first-child {
  text-align: left;
}

/* "Rosa" è in realtà 4 tabelle separate (Portieri/Difensori/Centrocampisti/
   Attaccanti, vedi squadra-stagione.blade.php) — ognuna con table-layout
   auto si allarga in base al SUO contenuto (es. il nome più lungo tra i
   soli portieri), quindi le colonne finiscono a larghezze diverse da una
   tabella all'altra e le intestazioni non si allineano in verticale.
   table-layout:fixed + stesse percentuali per tutte le rende identiche. */
#rosa .arc-tabella {
  table-layout: fixed;
}

#rosa .arc-tabella th:first-child,
#rosa .arc-tabella td:first-child {
  width: 40%;
}

#rosa .arc-tabella th:not(:first-child),
#rosa .arc-tabella td:not(:first-child) {
  width: 15%;
}

#risultati .arc-tabella th:first-child,
#risultati .arc-tabella td:first-child {
  width: 40px;
}

/* Pagina stagione (stagione.blade.php): Capocannonieri/Assistman/Squadra
   ideale/Curiosità ereditavano i 20px del body (nessun font-size proprio) —
   troppo grandi rispetto al resto della pagina. */
#capocannonieri .arc-lista-classifica,
#assistman .arc-lista-classifica,
#squadra-ideale .arc-lista-classifica,
#curiosita .arc-lista-classifica {
  font-size: 16px;
}

.arc-lista-classifica {
  margin: 0;
  padding-left: 20px;
}

.arc-lista-classifica li {
  margin-bottom: 6px;
}

.arc-giornate-colonne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  align-items: start;
}

@media (max-width: 640px) {
  .arc-giornate-colonne {
    grid-template-columns: 1fr;
  }
}

.arc-giornata {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 4px 14px;
}

.arc-giornata summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 600;
}

.arc-giornata__partite {
  list-style: none;
  margin: 0;
  padding: 0 0 10px;
}

.arc-giornata__partite li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
  border-top: 1px solid var(--border);
}

.arc-giornata__partite li span:first-child {
  flex: 1;
  text-align: right;
}

.arc-giornata__partite li span:last-child {
  flex: 1;
}

.arc-giornata__partite strong {
  color: var(--oro);
  min-width: 50px;
  text-align: center;
}

.arc-griglia-stagioni {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.arc-griglia-stagioni a {
  display: block;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;
  text-align: center;
}

.arc-griglia-stagioni a:hover {
  background: var(--surface-hover);
  text-decoration: none;
  border-color: var(--oro);
}

.arc-lista-giocatori {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 20px;
}

@media (max-width: 640px) {
  .arc-lista-giocatori {
    columns: 1;
  }
}

.arc-lista-giocatori li {
  break-inside: avoid;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.arc-nav-stagioni {
  display: flex;
  justify-content: space-between;
  margin: 32px 0;
  font-weight: 600;
}

.arc-cta {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
}

.arc-footer {
  border-top: 1px solid var(--border);
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}