@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root {
 --bg-color: #0f172a;
 --card-bg: rgba(30, 41, 59, 0.7);
 --glass-border: rgba(255, 255, 255, 0.1);
 --accent-primary: #38bdf8; /* Sky Blue */
 --accent-success: #22c55e; /* Green */
 --accent-warning: #eab308; /* Yellow */
 --accent-danger: #ef4444; /* Red */
 --text-main: #f8fafc;
 --text-muted: #94a3b8;
 --font-family: 'Outfit', sans-serif;
 --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 -webkit-tap-highlight-color: transparent;
}

body {
 background-color: var(--bg-color);
 color: var(--text-main);
 font-family: var(--font-family);
 min-height: 100vh;
 padding-bottom: calc(80px + var(--safe-area-inset-bottom));
 overflow-x: hidden;
}

/* Header */
header {
 position: sticky;
 top: 0;
 z-index: 100;
 background: rgba(15, 23, 42, 0.8);
 backdrop-filter: blur(12px);
 padding: 1rem;
 border-bottom: 1px solid var(--glass-border);
}

.header-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
}

h1 {
 font-size: 1.5rem;
 font-weight: 700;
 background: linear-gradient(to right, #38bdf8, #818cf8);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.search-container {
 position: relative;
 width: 100%;
 margin-bottom: 1rem;
}

/* Tabs Squadre */
.tabs-container {
 display: flex;
 gap: 0.5rem;
 background: rgba(255, 255, 255, 0.03);
 padding: 4px;
 border-radius: 14px;
 border: 1px solid var(--glass-border);
}

.tab-btn {
 flex: 1;
 padding: 0.6rem;
 border: none;
 border-radius: 10px;
 background: transparent;
 color: var(--text-muted);
 font-family: var(--font-family);
 font-weight: 600;
 font-size: 0.9rem;
 cursor: pointer;
 transition: all 0.3s ease;
}

.tab-btn.active {
 background: var(--card-bg);
 color: var(--accent-primary);
 box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
 border: 1px solid rgba(56, 189, 248, 0.2);
}

.search-container input {
 width: 100%;
 padding: 0.75rem 1rem 0.75rem 2.5rem;
 background: var(--card-bg);
 border: 1px solid var(--glass-border);
 border-radius: 12px;
 color: white;
 font-size: 1rem;
 outline: none;
 transition: border-color 0.3s;
}

.search-container input:focus {
 border-color: var(--accent-primary);
}

.search-icon {
 position: absolute;
 left: 0.8rem;
 top: 50%;
 transform: translateY(-50%);
 color: var(--text-muted);
}

/* Player List */
.player-list {
 padding: 1rem;
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

/* Player Card */
.player-card {
 background: var(--card-bg);
 border: 1px solid var(--glass-border);
 border-radius: 20px;
 padding: 1rem;
 display: flex;
 flex-direction: column;
 gap: 1rem;
 backdrop-filter: blur(8px);
 transition: transform 0.2s, border-color 0.2s;
}

.player-card.expanded {
 border-color: rgba(56, 189, 248, 0.3);
}

.card-main {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.player-info {
 flex: 1;
}

.player-name {
 font-size: 1.1rem;
 font-weight: 600;
 display: block;
}

.player-team {
 font-size: 0.85rem;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.vote-control {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.vote-circle {
 width: 54px;
 height: 54px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.05);
 border: 2px solid var(--accent-primary);
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.25rem;
 font-weight: 700;
 color: var(--accent-primary);
}

/* Quick Actions */
.quick-actions {
 display: flex;
 gap: 0.5rem;
}

.btn-action {
 position: relative; /* Per il badge */
 flex: 1;
 padding: 0.75rem;
 border: none;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.05);
 color: var(--text-main);
 font-family: var(--font-family);
 font-weight: 600;
 font-size: 0.9rem;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 2px;
 cursor: pointer;
 transition: background 0.2s, transform 0.1s, border-color 0.2s;
}

.btn-action:active {
 transform: scale(0.95);
}

/* Badge Contatore */
.badge-count {
 position: absolute;
 top: -5px;
 right: -5px;
 background: var(--accent-primary);
 color: white;
 font-size: 0.7rem;
 padding: 2px 6px;
 border-radius: 8px;
 display: none;
 font-weight: 800;
 box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.btn-action.has-count .badge-count {
 display: block;
}

.btn-action.active-goal {
 background: rgba(34, 197, 94, 0.2);
 border: 1px solid var(--accent-success);
 color: var(--accent-success);
}

.btn-action.active-goal .badge-count {
 background: var(--accent-success);
}

.btn-action.active-assist {
 background: rgba(56, 189, 248, 0.2);
 border: 1px solid var(--accent-primary);
 color: var(--accent-primary);
}

.btn-plus {
 width: 44px;
 padding: 0;
 font-size: 1.5rem;
}

/* Extra Panel */
.extra-panel {
 display: none;
 grid-template-columns: repeat(4, 1fr); /* 4 colonne per ottimizzare spazio */
 gap: 0.5rem;
 padding-top: 1rem;
 border-top: 1px solid var(--glass-border);
 animation: fadeIn 0.3s ease;
}

.player-card.expanded .extra-panel {
 display: grid;
}

.btn-bonus {
 padding: 0.6rem 0.2rem;
 border: 1px solid var(--glass-border);
 border-radius: 10px;
 background: rgba(255, 255, 255, 0.02);
 color: var(--text-muted);
 font-size: 0.65rem;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 text-align: center;
}

.btn-bonus.active {
 background: rgba(255, 255, 255, 0.1);
 color: white;
 border-color: white;
}

.icon {
 font-size: 1.2rem;
}

/* Colors for specific bonuses */
.btn-bonus[data-type="ammonizione"].active { border-color: #facc15; color: #facc15; background: rgba(250, 204, 21, 0.1); }
.btn-bonus[data-type="espulsione"].active { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.btn-bonus[data-type="rigore-segnato"].active { border-color: #4ade80; color: #4ade80; }
.btn-bonus[data-type="rigore-sbagliato"].active { border-color: #f87171; color: #f87171; }
.btn-bonus[data-type="autorete"].active { border-color: #f87171; color: #f87171; }

@keyframes fadeIn {
 from { opacity: 0; transform: translateY(-10px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Footer Summary */
.bottom-summary {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 background: rgba(15, 23, 42, 0.9);
 backdrop-filter: blur(20px);
 border-top: 1px solid var(--glass-border);
 padding: 1rem 1rem calc(1rem + var(--safe-area-inset-bottom));
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.progress-info span {
 display: block;
 font-size: 0.8rem;
 color: var(--text-muted);
}

.progress-info strong {
 font-size: 1.1rem;
}

.btn-save {
 background: var(--accent-success);
 color: white;
 border: none;
 padding: 0.75rem 1.5rem;
 border-radius: 12px;
 font-weight: 700;
 font-size: 1rem;
 box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Utilities */
.text-success { color: var(--accent-success); }
.text-danger { color: var(--accent-danger); }