/* assets/css/classifica.css - TEMA 2026 */

/* --- Font Setup --- */
@font-face { 
    font-family: 'DrukWide'; 
    src: url('/assets/doc/DrukTextWide-MediumItalic-Trial.otf') format('opentype');
    font-weight: bold; 
    font-style: italic; 
}
@font-face { 
    font-family: 'HelveticaBold'; 
    src: url('/assets/doc/HelveticaBold.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
}

/* --- Stili Globali --- */
:root {
    --rosa-elettrico: #ff19ff;
    --viola: #790cfd;
    --testo-bianco: #ffffff;
    --sfondo-scuro: rgba(18, 0, 40, 0.85); 
    --sfondo-scuro-2: rgba(18, 0, 40, 0.5); 
    --bordo-sottile: 1px solid rgba(255, 255, 255, 0.15);
}

body {
    background-color: #120028 !important; 
    color: var(--rosa-elettrico);
    font-family: 'HelveticaBold', Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: linear-gradient(rgba(18, 0, 40, 0.7), rgba(18, 0, 40, 0.7)), url('/assets/imm/gradiente26.jpg') center/cover no-repeat;
    z-index: -1;
    transform: translateZ(0);
    will-change: transform;
}

/* --- Layout Classifica --- */
.classifica-container { 
    background-color: var(--sfondo-scuro); 
    border-radius: 8px; 
    box-shadow: 0 3px 10px rgba(18, 0, 40, 0.5); 
    margin: 13px auto; 
    padding: 10px; 
    width: 95%; 
    max-width: 670px; 
    border: 1px solid var(--bordo-sottile);
}

.classifica-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 10px; 
    padding-bottom: 7px; 
    border-bottom: var(--bordo-sottile); 
}

.classifica-title { 
    font-family: 'DrukWide', Arial, sans-serif; 
    font-style: italic;
    font-weight: bold;
    color: var(--rosa-elettrico); 
    font-size: 1.2rem; 
    margin: 0; 
    text-transform: uppercase;
}

.classifica-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-family: 'HelveticaBold', Arial, sans-serif; 
}

.classifica-table thead th { 
    font-family: 'DrukWide', Arial, sans-serif;
    font-style: italic;
    font-weight: bold;
    background-color: rgba(18, 0, 40, 0.95); 
    color: var(--rosa-elettrico); 
    padding: 8px 10px; 
    text-align: left; 
    font-size: 0.6rem;
    text-transform: uppercase; 
    letter-spacing: 0.67px; 
}

.classifica-table tbody tr { 
    background-color: var(--sfondo-scuro-2); 
    border-bottom: var(--bordo-sottile); 
    transition: background-color 0.3s ease; 
}

.classifica-table tbody tr:nth-child(even) { 
    background-color: rgba(121, 12, 253, 0.15); 
}

.classifica-table tbody tr:hover { 
    background-color: rgba(255, 25, 255, 0.15); 
}

.classifica-table td { 
    padding: 8px 10px; 
    color: var(--testo-bianco); 
    vertical-align: middle; 
}

.posizione-cell { 
    font-family: 'DrukWide', Arial, sans-serif; 
    font-style: italic;
    font-weight: bold;
    color: var(--rosa-elettrico); 
    font-size: 0.74rem; 
    text-align: center; 
    width: 34px; 
}

.squadra-cell { 
    display: flex; 
    align-items: center; 
    gap: 7px; 
}

.squadra-logo { 
    width: 23px; 
    height: 23px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 1px solid var(--rosa-elettrico); 
}

.squadra-info { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}

.squadra-nome { 
    font-family: 'HelveticaBold', Arial, sans-serif;
    font-weight: bold; 
    font-size: 0.64rem; 
    text-transform: uppercase; 
    text-align: left; 
}

.user-nome { 
    font-size: 0.45rem; 
    opacity: 0.8; 
    text-transform: uppercase; 
    text-align: left; 
}

.punti-cell { 
    font-family: 'DrukWide', Arial, sans-serif; 
    font-style: italic;
    font-weight: bold;
    font-size: 0.74rem; 
    text-align: right; 
    padding-right: 17px; 
}

.toggle-cell { 
    text-align: center; 
    width: 34px; 
}

.toggle-icon { 
    width: 13px; 
    height: 13px; 
    cursor: pointer; 
    transition: transform 0.3s ease; 
    filter: brightness(0) invert(1); 
    opacity: 0.8; 
}

.toggle-icon:hover { 
    opacity: 1; 
    transform: scale(1.1); 
}

.dettagli-row { 
    background-color: rgba(18, 0, 40, 0.95) !important; 
}

.dettagli-content { 
    padding: 10px; 
}

/* --- Dettaglio Giocatori in Classifica --- */
.giocatori-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 3px;
}

.giocatore-container {
    display: flex;
    flex-direction: column;
}

.giocatore-row {
    display: flex;
    align-items: center;
    position: relative;
    padding: 2px 7px;     /* era 5px 7px */
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    gap: 7px;
    line-height: 1.5;     /* aggiungi questa riga */
}

.giocatore-row.titolare::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background-color: #2ecc71; border-radius: 4px 0 0 4px;
}

.giocatore-row.panchina::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background-color: #7f8c8d; border-radius: 4px 0 0 4px;
}

.giocatore-info {
    display: flex; align-items: center; flex: 1; min-width: 0; gap: 7px;
}

.giocatore-img {
    width: 21px; height: 21px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--rosa-elettrico); flex-shrink: 0;
}

.giocatore-dati {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
    font-size: 0.55rem; flex: 1; min-width: 0;
    text-transform: uppercase; /* FORZA CAPS LOCK TENDINA */
}

.giocatore-nome { 
    white-space: nowrap; 
    text-transform: uppercase;
}

.giocatore-cognome { 
    font-weight: bold; 
    white-space: nowrap; 
    text-transform: uppercase;
}

.giocatore-ruolo {
    color: var(--rosa-elettrico); font-size: 0.54em; padding: 1px 4px;
    background-color: rgba(121, 12, 253, 0.2); border-radius: 7px; white-space: nowrap;
    text-transform: uppercase;
}

.giocatore-punti {
    display: flex; align-items: center; gap: 7px; margin-left: auto;
    padding-left: 7px; flex-shrink: 0;
}

.punti-text { 
    font-family: 'DrukWide', Arial, sans-serif;
    font-style: italic;
    font-weight: bold;
    min-width: 34px; 
    text-align: right;
    font-size: 0.55rem;  /* aggiungi questa riga */
}
.capitano-marker { color: #f1c40f; font-size: 0.47em; margin-left: 3px; white-space: nowrap; }

.bonus-content {
    padding: 10px; background-color: rgba(255, 25, 255, 0.1); border-radius: 5px;
    margin-top: 7px; font-size: 0.45rem; display: none; text-align: left;
    box-shadow: 0 1px 5px rgba(255, 25, 255, 0.2);
    text-transform: uppercase;
}

.toggle-button {
    background: linear-gradient(135deg, var(--rosa-elettrico) 0%, var(--viola) 100%);
    border: none; border-radius: 50%; width: 16px; height: 16px; display: flex;
    align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(255, 25, 255, 0.3);
}

.toggle-button:hover {
    transform: scale(1.1); box-shadow: 0 2px 5px rgba(255, 25, 255, 0.5);
}

.toggle-button img { width: 9px; height: 9px; filter: brightness(0) invert(1); }

.desktop-only {
    font-size: 0.45rem;   /* aggiungi questa riga */
    opacity: 0.8;
    text-transform: uppercase;
    display: none;
}

.moltiplicatore {
    font-size: 0.47em; padding: 1px 4px; border-radius: 7px; white-space: nowrap;
    font-weight: bold; margin-left: 3px;
}
.capitano-mult { color: #f1c40f; background-color: rgba(241, 196, 15, 0.2); }
.titolare-mult { color: #2ecc71; background-color: rgba(46, 204, 113, 0.2); }
.panchina-mult { color: #7f8c8d; background-color: rgba(127, 140, 141, 0.2); }

/* Responsive Media Queries */
@media (max-width: 515px) {
    .giocatore-row { padding: 4px 5px; gap: 5px; }
    .giocatore-img { width: 19px; height: 19px; }
    .giocatore-dati { font-size: 0.5rem; gap: 3px; }
    .giocatore-nome { display: none; }
    .giocatore-ruolo { font-size: 0.47em; padding: 1px 3px; }
    .punti-text { min-width: 27px; font-size: 0.57rem; }
    .moltiplicatore { font-size: 0.4em; padding: 1px 3px; margin-left: 2px; }
    
    .classifica-table thead th { padding: 5px 4px; font-size: 0.55rem; }
    .classifica-table td { padding: 5px 4px; }
    .squadra-cell { gap: 4px; }
    .squadra-nome { font-size: 0.57rem; }
    .user-nome { font-size: 0.4rem; }
    .classifica-title { font-size: 1rem; }
    .dettagli-content { padding: 7px 3px; }
}

@media (max-width: 322px) {
    .giocatore-row { padding: 3px 4px; gap: 4px; }
    .giocatore-img { width: 16px; height: 16px; }
    .giocatore-ruolo { display: none; }
    .giocatore-ruolo-mobile { display: inline; color: var(--rosa-elettrico); font-size: 0.47em; margin-left: 3px; }
    .moltiplicatore { display: none; }
    
    .classifica-container { padding: 7px 3px; width: 98%; }
    .classifica-table { font-size: 0.55rem; }
    .classifica-table thead th { padding: 4px 3px; font-size: 0.5rem; }
    .classifica-table td { padding: 5px 3px; }
    .posizione-cell { width: 20px; font-size: 0.6rem; }
    .squadra-logo { width: 19px; height: 19px; }
    .toggle-cell { width: 20px; }
    .classifica-title { font-size: 0.8rem; }
}

@media (min-width: 516px) {
    .desktop-only { display: table-cell; }
    .giocatore-ruolo-mobile { display: none; }
}