/**
 * Stili per la classifica frontend IEMBI
 *
 * @package IEMBI_Voting_System
 * @since 1.2.29
 */

/* Variabili CSS MiDance.it Brand Colors OFFICIAL */
.iembi-leaderboard-container {
    --iembi-primary: #FFFFFF;        /* Primary */
    --iembi-secondary: #1A1A1A;     /* Secondary */
    --iembi-accent: #EA3323;         /* Accent */
    --iembi-text: #FFFFFF;           /* Text */
    --iembi-bg-dark: #0F0F0F;        /* Background site */
    --iembi-borders: #5B5B5B;        /* Borders */
    --iembi-black-bg: #0F0F0F;        /* Black BG */
    /* Rimuoviamo tutti i colori non ufficiali e usiamo solo la palette MiDance */
    --iembi-success: #EA3323;         /* Usa accent per successi */
    --iembi-warning: #EA3323;         /* Usa accent per warning */
    --iembi-info: #EA3323;             /* Usa accent per info */
    --iembi-light: rgba(255, 255, 255, 0.1); /* Light con primary */
    --iembi-dark: var(--iembi-secondary);       /* Dark = secondary */
    --iembi-border: var(--iembi-borders);
    --iembi-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --iembi-radius: 12px;
    --iembi-transition: all 0.3s ease;
}

/* Container principale */
.iembi-leaderboard-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--iembi-black-bg); /* #0F0F0F */
    border-radius: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header classifica */
.iembi-leaderboard-header {
    text-align: center;
    margin-bottom: 2rem;
}

.iembi-leaderboard-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--iembi-accent);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.iembi-leaderboard-subtitle {
    font-size: 1rem;
    color: var(--iembi-borders);
    opacity: 0.9;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Card classifica */
.iembi-leaderboard-card {
    background: var(--iembi-black-bg); /* #0F0F0F di default */
    border: 1px solid var(--iembi-border);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: background-color 0.2s ease;
}

.iembi-leaderboard-card:hover {
    background: rgba(234, 51, 35, 0.1);
}

/* Posizioni podio - Design Flat Moderno */
.iembi-leaderboard-card.first {
    background: var(--iembi-accent); /* #EA3323 */
    border-color: var(--iembi-accent);
    color: var(--iembi-text);
}

.iembi-leaderboard-card.second {
    background: var(--iembi-accent); /* #EA3323 */
    border-color: var(--iembi-accent);
    color: var(--iembi-text);
}

.iembi-leaderboard-card.third {
    background: var(--iembi-accent); /* #EA3323 */
    border-color: var(--iembi-accent);
    color: var(--iembi-text);
}

/* Posizioni normali (dal 4° in poi) */
.iembi-leaderboard-card:not(.first):not(.second):not(.third) {
    background: var(--iembi-black-bg); /* #0F0F0F */
    border-color: var(--iembi-borders);
    color: var(--iembi-text);
}

/* Header card */
.iembi-leaderboard-card-header {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: transparent;
}

/* Posizione */
.iembi-leaderboard-position {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 1rem;
    min-width: 40px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.first .iembi-leaderboard-position,
.second .iembi-leaderboard-position,
.third .iembi-leaderboard-position {
    color: var(--iembi-primary); /* #FFFFFF - bianco per contraste migliore */
    font-weight: 700;
}

/* Informazioni nominativo */
.iembi-leaderboard-info {
    flex: 1;
}

.iembi-leaderboard-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--iembi-text);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

/* Stili specifici nome per il podio */
.first .iembi-leaderboard-name,
.second .iembi-leaderboard-name,
.third .iembi-leaderboard-name {
    color: var(--iembi-primary); /* Bianco per leggibilità su sfondo rosso */
}

.iembi-leaderboard-role-company {
    font-size: 0.875rem;
    color: var(--iembi-accent); /* Default: rosso accent */
    opacity: 0.95;
    margin-bottom: 0.15rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.iembi-separator {
    font-weight: 400;
    opacity: 0.7;
    margin: 0 0.25rem;
}

/* Stili specifici per il podio (prime tre posizioni con sfondo rosso) - RUOLO E AZIENDA BIANCHI */
.first .iembi-leaderboard-role-company,
.second .iembi-leaderboard-role-company,
.third .iembi-leaderboard-role-company {
    color: var(--iembi-primary); /* Bianco per leggibilità su sfondo rosso */
    opacity: 0.95;
}

.first .iembi-separator,
.second .iembi-separator,
.third .iembi-separator {
    color: var(--iembi-primary); /* Bianco anche il separatore */
    opacity: 0.8;
}

/* Stili per le altre posizioni (dal 4° in poi) - RUOLO E AZIENDA ROSSO ACCENT */
.iembi-leaderboard-card:not(.first):not(.second):not(.third) .iembi-leaderboard-role-company {
    color: var(--iembi-accent); /* Rosso accent MiDance */
    opacity: 0.95;
}

.iembi-leaderboard-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.iembi-leaderboard-vote-count {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--iembi-accent);
    font-variant-numeric: tabular-nums;
}

.iembi-leaderboard-vote-label {
    font-size: 0.75rem;
    color: var(--iembi-text);
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 400;
}

/* Stili specifici voti per il podio */
.first .iembi-leaderboard-vote-count,
.second .iembi-leaderboard-vote-count,
.third .iembi-leaderboard-vote-count {
    color: var(--iembi-primary); /* Bianco per leggibilità su sfondo rosso */
}

.first .iembi-leaderboard-vote-label,
.second .iembi-leaderboard-vote-label,
.third .iembi-leaderboard-vote-label {
    color: var(--iembi-primary); /* Bianco per leggibilità su sfondo rosso */
    opacity: 0.8;
}

/* Design completamente flat e moderno - nessuna animazione datata */

/* Responsive mobile-first moderno */
@media (max-width: 768px) {
    .iembi-leaderboard-container {
        margin: 1rem auto;
        padding: 1.5rem;
    }
    
    .iembi-leaderboard-title {
        font-size: 1.75rem;
        letter-spacing: -0.03em;
    }
    
    .iembi-leaderboard-card-header {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .iembi-leaderboard-position {
        margin-right: 0;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
    }
    
    .iembi-leaderboard-info {
        text-align: center;
        margin-bottom: 0.5rem;
    }
    
    .iembi-leaderboard-votes {
        flex-direction: row;
        gap: 0.5rem;
    }
    
    .iembi-leaderboard-name {
        font-size: 1rem;
    }
    
    .iembi-leaderboard-vote-count {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .iembi-leaderboard-title {
        font-size: 1.5rem;
        letter-spacing: -0.02em;
    }
    
    .iembi-leaderboard-subtitle {
        font-size: 0.875rem;
    }
    
    .iembi-leaderboard-card-header {
        padding: 1rem;
    }
    
    .iembi-leaderboard-name {
        font-size: 0.95rem;
    }
    
    .iembi-leaderboard-position {
        font-size: 1.1rem;
    }
    
    .iembi-leaderboard-vote-count {
        font-size: 1rem;
    }
}