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

body{
    margin:0;
    background:#0b0b0b;
    color:#e6e6e6;
    font-family:Arial, Helvetica, sans-serif;
}

a{
    color:#4dabf7;
    text-decoration:none;
}

a:hover{
    color:#74c0fc;
}
.table td,
.table th {
    text-align: center;
}

.table td:nth-child(2),
.table th:nth-child(2) {
    text-align: left; /* keep team name left */
}
.team-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-logo {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
}

.position-filter {
    text-align: center;
    margin: 15px 0;
}

.position-filter a {
    display: inline-block;
    padding: 8px 14px;
    margin: 4px;
    background: #1c1c1c;
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid #333;
    transition: all 0.2s ease;
}

.position-filter a:hover {
    background: #333;
    border-color: #555;
}

.position-filter a.active {
    background: #4CAF50;
    border-color: #4CAF50;
    color: #fff;
}
/* =========================
   LAYOUT
========================= */

.page-container{
    max-width:1100px;
    margin:auto;
    padding:30px;
}

.players-container{
    max-width:900px;
    margin:auto;
    padding:20px;
}
.player-headshot {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.player-headshot[src=] {
    display: none;
}

/* =========================
   HEADER / NAV
========================= */

.site-header{
    background:#111;
    border-bottom:1px solid #2a2a2a;
    box-shadow:
        0 1px 0 #2f2f2f inset,
        0 -1px 0 #000 inset,
        0 4px 10px rgba(0,0,0,.6);
}

.header-inner{
    max-width:1100px;
    margin:auto;
    display:flex;
    justify-content:center;
    padding:14px 20px;
    background:#0f0f0f;
}

.site-logo{
    font-size:22px;
    font-weight:700;
}

.site-logo::before{
    content:"🏈 ";
}

.main-nav a{
    color:#bbb;
    font-weight:600;
}

.main-nav a:hover{
    color:#fff;
}

.main-nav a.active{
    color:#fff;
    border-bottom:2px solid #4dabf7;
}
/* =========================
   STANDINGS
========================= */

.standings{
    max-width:650px;   /* smaller width */
    margin:0 auto;
}

.standing-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 10px;
    border-bottom:1px solid #2a2a2a;
}

.standing-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.standing-rank{
    width:26px;
    font-weight:bold;
    font-size:15px;
}

.standing-logo{
    width:34px;
    height:34px;
    border-radius:6px;
}

.standing-name{
    font-weight:600;
    font-size:14px;
}

/* 👇 NEW: group name + points together */
.standing-main{
    display:flex;
    align-items:center;
    gap:12px;
}

.standing-points{
    font-size:15px;
    font-weight:bold;
    color:#4dabf7;
}

.standing-right{
    display:flex;
    align-items:center;
}
/* =========================
   SEARCH
========================= */

.search-bar{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

/* wrapper for input + clear button */
.search-wrapper{
    position:relative;
    display:inline-block;
}

/* input */
.search-wrapper input{
    padding:8px 30px 8px 10px;
    width:240px;
}

/* clear (X) button */
.clear-btn{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#666;
    font-size:16px;
    font-weight:bold;
    display:none;
}

/* hover */
.clear-btn:hover{
    color:#fff;
}

/* CLEAR (X) BUTTON */

.clear-btn{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#666;
    font-size:16px;
    display:none; /* hidden until typing */
}

.clear-btn:hover{
    color:#fff;
}
/* =========================
   PLAYER LIST (SEARCH PAGE)
========================= */

.player-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px;
    border-bottom:1px solid #333;
}

.player-headshot{
    width:40px;
    height:40px;
    object-fit:cover;
    border-radius:4px;
    flex-shrink:0;
}

.player-info{
    display:flex;
    flex-direction:column;
}

.player-row .player-name{
    font-weight:600;
    color:#4dabf7;
    font-size:14px;
}

.player-row .player-meta{
    font-size:12px;
    color:#aaa;
}

.player-action{
    margin-left:auto;
}

.draft-btn{
    background:#1e90ff;
    color:#fff;
    padding:5px 10px;
    border-radius:4px;
    font-size:12px;
}

.draft-btn:hover{
    background:#339af0;
}

/* =========================
   AVAILABLE PLAYERS CLEAN
========================= */

.available-wrapper{
    max-width:650px;
    margin:0 auto;
    padding:20px;
}

/* HEADERS */

.center{
    text-align:center;
}

.section-title{
    font-size:26px;
    margin-bottom:5px;
}

.section-subtitle{
    font-size:18px;
    margin-bottom:20px;
    color:#aaa;
}

/* SEARCH */

.available-search{
    display:flex;
    justify-content:center;
    margin-bottom:20px;
}

/* SEARCH WRAPPER */

.search-wrapper{
    position:relative;
    width:260px;
}

/* INPUT */

.search-wrapper input{
    background:#1a1a1a;   /* dark */
    color:#fff;           /* text color */
    border:1px solid #333;
}
/* CLEAR BUTTON */

#clearBtn{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    color:#aaa;
    font-size:14px;
    cursor:pointer;
    display:none;
    line-height:1;
}

/* hover */

#clearBtn:hover{
    color:#fff;
}

.search-wrapper{
    position:relative;
}

.clear-btn{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
}
.clear-btn:hover{
    color:#fff;
}

/* PLAYER ROW */

.player-row{
    display:flex;
    align-items:center;
    padding:8px 10px;
    border-bottom:1px solid #222;
}

/* tighter spacing */

.player-row img{
    width:34px;
    height:34px;
    border-radius:50%;
    margin-right:10px;
}

/* INFO */

.player-info{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.player-name{
    font-weight:600;
    color:#4da3ff;
    font-size:14px;
}

.player-meta{
    font-size:11px;
    color:#888;
}

/* BUTTON (RIGHT SIDE CLEAN) */

.player-action{
    margin-left:auto;
}

.player-action a{
    padding:5px 10px;
    font-size:12px;
    background:#1e90ff;
    border-radius:4px;
    color:#fff;
    text-decoration:none;
}

.player-action a:hover{
    background:#3aa0ff;
}
/* =========================
   TABLES (ADMIN / LISTS)
========================= */

table{
    width:100%;
    border-collapse:collapse;
    background:#111;
}

th, td{
    padding:10px;
    border-bottom:1px solid #333;
}

thead th{
    position:sticky;
    top:0;
    background:#1b1b1b;
}


/* =========================
   PAGINATION
========================= */

.pagination{
    margin-top:15px;
}

.pagination a{
    background:#222;
    color:#ddd;
    padding:6px 10px;
    margin-right:4px;
    border-radius:4px;
}

.pagination a:hover{
    background:#444;
}

.active-page{
    background:#4da6ff;
    color:#fff;
    padding:6px 10px;
    border-radius:4px;
}
/* =========================
   PROFILE
========================= */

.profile-wrapper{
    display:flex;
    justify-content:center;
    margin-top:40px;
}

.profile-table{
    border-collapse:collapse;
    min-width:400px;
}

.profile-table td{
    padding:10px;
}

.form-actions{
    text-align:center;
    margin-top:20px;
}

.form-actions button{
    padding:10px 20px;
    font-size:16px;
    cursor:pointer;
}
/* =========================
   BUTTONS
========================= */

.btn{
    padding:8px 16px;
    background:#333;
    border:1px solid #555;
    border-radius:6px;
    color:#fff;
    cursor:pointer;
}

.btn:hover{
    background:#444;
}


/* =========================
   DRAFT BOARD
========================= */

.draft-board{
    display:grid;
    grid-template-columns:auto repeat(16,160px);
    gap:12px;
}

.draft-pick{
    width:160px;
    height:90px;
    background:#223548;
    border-radius:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.draft-headshot{
    width:40px;
    height:40px;
    border-radius:50%;
}

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

.draft-meta{
    font-size:13px;
    color:#b8c7d6;
}


/* =========================
   ANIMATIONS
========================= */

.draft-highlight{
    transform:scale(1.2);
    border:3px solid #ffd700;
    transition:.3s;
}

.next-pick{
    border:2px solid #00ffc3;
    box-shadow:0 0 12px #00ffc3;
}
/* FORCE correct size on player search */
.player-row img{
    width:40px !important;
    height:40px !important;
    object-fit:cover;
    border-radius:4px;
    flex-shrink:0;
}
/* =========================
   TEAM REGISTER FORM
========================= */


.form-group{
    margin-bottom:15px;
}

.form-group input[type=text], .form-group input[type=file]{
    padding:8px;
    width:260px;
}

.form-hint{
    font-size:12px;
    color:#777;
    margin-top:5px;
}

/* =========================
   TRADE GRID
========================= */

.trade-grid{
    display:flex;
    gap:20px;
    margin-top:20px;
}

.trade-column{
    flex:1;
    background:#111827;
    padding:15px;
    border-radius:8px;
}

.player-list{
    max-height:400px;
    overflow-y:auto;
    padding-top:10px;
}

.trade-container{
    display:flex;
    gap:30px;
    margin-top:20px;
}

.trade-side{
    flex:1;
    background:#111;
    padding:20px;
    border-radius:8px;
}

.player-row{
    padding:6px 0;
    border-bottom:1px solid #222;
}

.trade-actions{
    margin-top:25px;
    display:flex;
    gap:15px;
}

.btn-accept{
    background:#28a745;
    color:#fff;
    padding:10px 20px;
    border:none;
    cursor:pointer;
}

.btn-reject{
    background:#dc3545;
    color:#fff;
    padding:10px 20px;
    border:none;
    cursor:pointer;
}

.waiting-text{
    color:#aaa;
    font-style:italic;
}
/* =========================
   PROFILE 
========================= */


.file-upload{
    display:inline-block;
    padding:8px 14px;
    background:#007bff;
    color:#fff;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
}

.file-upload:hover{
    background:#339dff;
}

#file-name{
    margin-left:10px;
    font-size:13px;
    color:#aaa;
}
/* =========================
   NOTIFICATIONS 
========================= */

.form-input{
    padding:8px;
    width:250px;
    border:1px solid #333;
    background:#111;
    color:#fff;
}

.notif-row{
    padding:12px;
    border-bottom:1px solid #222;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.notif-row.unread{
    background:#111;
    border-left:4px solid #ff3b3b;
}

.notif-message{
    color:#fff;
}

.notif-meta{
    font-size:12px;
    color:#888;
}

.notif-btn{
    margin-top:5px;
    font-size:12px;
    color:#00aaff;
    text-decoration:none;
}

/* =========================
   TRADE BUTTON
========================= */
.btn-reject{
    background:#b30000;
    color:#fff;
    border:none;
    padding:10px 16px;
    border-radius:6px;
    cursor:pointer;
    font-weight:bold;
    transition:0.2s ease;
}

.btn-reject:hover{
    background:#ff1a1a;
    box-shadow:0 0 10px rgba(255,0,0,0.6);
}

.btn-reject:active{
    transform:scale(0.97);
}

button[type=submit]{
    background:#00ff99;
    color:#000;
    border:none;
    padding:12px 24px;
    font-size:16px;
    font-weight:bold;
    border-radius:6px;
    cursor:pointer;
    transition:all 0.2s ease;
    display:block;
    margin:20px auto;

}
button[type=submit]{
    display:block;
    margin:20px auto;
}
button[type=submit]:hover{
    background:#00cc7a;
    transform:scale(1.05);
}

button[type=submit]:active{
    transform:scale(0.98);
}
.btn-primary{
    background:#00ff99;
    color:#000;
    border:none;
    padding:12px 24px;
    font-size:16px;
    font-weight:bold;
    border-radius:6px;
    cursor:pointer;
    transition:all 0.2s ease;
}

.btn-primary:hover{
    background:#00cc7a;
    transform:scale(1.05);
}

.btn-primary:active{
    transform:scale(0.98);
}

/* =========================
   PLAYER TRADE REVIEW
========================= */

.player-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 0;
    border-bottom:1px solid #222;
}

.player-headshot{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
}

.player-info{
    display:flex;
    flex-direction:column;
}

.player-name{
    font-weight:bold;
    color:#fff;
}

.player-meta{
    font-size:13px;
    color:#aaa;
    display:flex;
    align-items:center;
    gap:6px;
}

.team-logo{
    width:18px;
    height:18px;
}
/* =========================
   PLAYER TRADE gGLOWING BUTTON
========================= */


.trade-alert{
    color:#fff;
    font-weight:bold;
    position:relative;
    animation:tradeGlow 1.2s infinite alternate;
}

@keyframes tradeGlow{
    from{
        text-shadow: 0 0 5px #ff3b3b;
    }
    to{
        text-shadow: 0 0 15px #ff0000, 0 0 25px #ff0000;
    }
}