/* ================= ROOT VARIABLES ================= */

:root{
--primary:#4e8cff;
--primary-dark:#3a6ed9;
--danger:#ef4444;
--danger-dark:#dc2626;
--border:#d1d5db;
--bg:#f4f6fb;
--card:#ffffff;
--text:#374151;
--shadow:0 8px 24px rgba(0,0,0,0.08);
}


/* ================= GLOBAL ================= */

*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:'Inter',sans-serif;
}

body{
background:var(--bg);
padding:20px;
color:#333;
}


/* ================= TOP BAR ================= */

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

#logoutBtn{
background:var(--primary);
color:white;
padding:8px 14px;
border:none;
border-radius:6px;
cursor:pointer;
font-weight:600;
}

#logoutBtn:hover{
background:var(--primary-dark);
}


/* ================= DASHBOARD LAYOUT ================= */

.dashboard-container{
display:grid;
grid-template-columns:420px 1fr;
gap:30px;
align-items:start;
}

.left-panel{
display:flex;
flex-direction:column;
gap:20px;
}

.right-panel{
display:flex;
flex-direction:column;
gap:20px;
}


/* ================= SEARCH BAR ================= */

.search-section input{
width:100%;
padding:10px 12px;
border:1px solid var(--border);
border-radius:6px;
font-size:14px;
}

.search-section input:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 5px rgba(78,140,255,0.3);
}


/* ================= FORM CARD ================= */

.form-card{
background:var(--card);
padding:25px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.06);
}


/* ================= FORM ================= */

.admin-form{
display:flex;
flex-direction:column;
gap:15px;
}

.form-group{
display:flex;
flex-direction:column;
gap:6px;
}

input{
padding:10px;
border:1px solid var(--border);
border-radius:6px;
font-size:14px;
}

input:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 5px rgba(78,140,255,0.3);
}


/* ================= BUTTONS ================= */

button{
cursor:pointer;
border:none;
border-radius:6px;
padding:8px 14px;
font-weight:600;
background:var(--primary);
color:white;
transition:all .15s ease;
}

button:hover{
background:var(--primary-dark);
}

button:active{
transform:scale(.96);
}

.admin-buttons{
display:flex;
gap:10px;
margin-top:10px;
}


/* ================= PLAYER CARDS ================= */

#playersContainer{
margin-top:10px;
display:flex;
flex-direction:column;
gap:12px;
}

.player-card{
background:var(--card);
border:1px solid #e5e7eb;
border-radius:10px;
overflow:hidden;
box-shadow:0 3px 8px rgba(0,0,0,0.04);
}


/* PLAYER SUMMARY (collapsed row) */

.player-summary{
display:grid;
grid-template-columns:60px 1fr 120px auto auto;
align-items:center;
gap:10px;
padding:10px 12px;
background:#f8fafc;
font-size:14px;
}

.player-title{
font-weight:600;
}

.player-name-preview{
font-weight:500;
}

/* PLAYER EDITOR (expanded form) */

/* PLAYER EDITOR (collapsed by default) */

.player-editor{
display:none;
padding:15px;
border-top:1px solid #e5e7eb;
grid-template-columns:1fr 1fr;
gap:12px;
}

/* show editor when card opened */

.player-card.open .player-editor{
display:grid;
}

.player-editor .full{
grid-column:1 / -1;
}


/* PLAYER BUTTONS */

.togglePlayer{
background:var(--primary);
color:white;
border:none;
padding:6px 10px;
border-radius:6px;
font-size:13px;
cursor:pointer;
}

.togglePlayer:hover{
background:var(--primary-dark);
}

.removePlayer{
background:var(--danger);
color:white;
border:none;
padding:6px 10px;
border-radius:6px;
font-size:13px;
cursor:pointer;
}

.removePlayer:hover{
background:var(--danger-dark);
}


/* ================= TEAM CARDS ================= */

.team{
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.06);
margin-bottom:20px;
transition:all .2s ease;
}

.team:hover{
transform:translateY(-2px);
box-shadow:0 12px 30px rgba(0,0,0,0.1);
}

.team-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

.team-actions{
display:flex;
gap:8px;
}

.edit{
background:var(--primary);
}

.delete{
background:var(--danger);
}


/* ================= TABLE ================= */

table{
width:100%;
border-collapse:collapse;
margin-top:10px;
font-size:14px;
}

th{
background:var(--primary);
color:white;
padding:10px;
font-weight:600;
}

td{
padding:10px;
border-bottom:1px solid #e5e7eb;
text-align:center;
}

tbody tr:hover{
background:#f3f6ff;
}


/* ================= MESSAGE ================= */

.message{
padding:10px;
border-radius:6px;
margin-bottom:15px;
display:none;
}


/* ================= RESPONSIVE ================= */

@media (max-width:900px){

.dashboard-container{
grid-template-columns:1fr;
}

}