/* Global Styles */
* { box-sizing: border-box; }
body {
    font-family: 'Outfit', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f9fb;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Layout */
.container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 1.5rem;
    padding: 1.5rem;
    flex-grow: 1;
}

.draft-sidebar, .draft-main {
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    transition: box-shadow 0.3s ease;
}

.draft-sidebar {
    flex: 0 0 25rem;
    overflow-y: auto;
    max-height: calc(100vh - 3rem);
}

.draft-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3rem);
}

/* Draft Sidebar */
.draft-sidebar h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: #2c3e50;
    border-bottom: 2px solid #e6ecef;
    padding-bottom: 0.75rem;
}

.team-pick {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #f1f3f5;
    gap: 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
    height: 80px; /* Fixed height to match PFF style */
    overflow: hidden;
}

.team-pick:hover { background-color: #f8fafc; }
.team-pick.current-pick {
    background-color: #e6f7fa;
    border: 1px solid #b3e5fc;
}
.team-pick.current-pick:hover { background-color: #d1f0f7; }

.pick-num {
    font-weight: 600;
    font-size: 1rem;
    min-width: 2rem;
    text-align: center;
    flex-shrink: 0;
}

.team-logo-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.team-logo {
    max-width: 24px; /* Smaller logo to match PFF style */
}

.trade-indicator {
    font-size: 0.9rem;
    color: #007bff;
    font-weight: 700;
}

.pick-status {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    flex-shrink: 0;
}

.pick-details {
    font-size: 0.9rem;
    color: #666;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.needs-label {
    font-weight: 500;
    font-size: 0.9rem;
}

.needs-list {
    font-size: 0.9rem;
    color: #777;
}

.player-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.player-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #777;
}

.player-meta .school-logo {
    max-width: 20px;
    vertical-align: middle;
}

/* Main Content */
.clock-panel {
    margin-bottom: 1.5rem;
}
.clock-panel h2 {
    font-size: 1.75rem;
    margin: 0 0 0.5rem;
    color: #2c3e50;
}
.current-team {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.round-info, .remaining-picks, .team-needs {
    font-size: 1rem;
    margin: 0.25rem 0;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 1rem;
    border-bottom: 2px solid #e6ecef;
    margin-bottom: 1rem;
}

.tab-button {
    font-family: 'Outfit', sans-serif;
    padding: 1rem 0;
    border: none;
    background: none;
    font-size: 1.125rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.tab-button:hover { color: #007bff; }
.tab-button.active {
    color: #007bff;
    border-bottom-color: #007bff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Filters */
.filters {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

#position-filter, #search-players, #team-dropdown, #trade-pick-select {
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #d1d9e0;
    border-radius: 0.5rem;
    outline: none;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s ease;
    flex: 1;
    min-width: 150px;
}

#position-filter:focus, #search-players:focus, #team-dropdown:focus, #trade-pick-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

.clear-button {
    font-size: 1.25rem;
    color: #ff4d4d;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
}

#trade-pick-button, .draft-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#trade-pick-button:hover, .draft-button:hover { background-color: #0056b3; }

/* Prospect List */
.player-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.prospect-list {
    flex: 1;
    max-height: 50vh; /* Adjusted to account for clock-panel, tabs, and filters */
    overflow-y: auto;
    overflow-x: hidden;
}

.prospect-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #f1f3f5;
    gap: 1rem;
    transition: background-color 0.2s ease;
}

.prospect-item:hover { background-color: #f8fafc; }
.prospect-item .rank {
    font-weight: 700;
    min-width: 2.5rem;
    text-align: center;
}
.prospect-item .name {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 500;
    gap: 1rem;
}
.school-logo { max-width: 30px; }
.prospect-item .player-details { display: flex; flex-direction: column; }
.prospect-item .player-meta { font-size: 0.9rem; color: #777; }
.prospect-item .position, .prospect-item .school { font-weight: 300; }

/* Trade Form */
.trade-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.trade-form label {
    font-weight: 600;
    color: #2c3e50;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .container { flex-direction: column; padding: 1rem; }
    .draft-sidebar, .draft-main { flex: 1 0 auto; max-height: none; }
    .draft-sidebar { margin-bottom: 1rem; }
    .prospect-list { max-height: 50vh; }
}

@media (max-width: 768px) {
    .draft-sidebar, .draft-main { padding: 1rem; }
    .team-pick { flex-wrap: wrap; gap: 0.5rem; height: auto; }
    .pick-details { margin-left: 0; }
    .tabs { flex-wrap: wrap; gap: 0.5rem; }
    .tab-button { font-size: 1rem; padding: 0.75rem 0; }
    .filters, .trade-form { flex-direction: column; gap: 0.75rem; }
    #position-filter, #search-players, #team-dropdown, #trade-pick-select { width: 100%; }
    #trade-pick-button, .draft-button { width: 100%; padding: 0.75rem; }
    .prospect-item { flex-wrap: wrap; padding: 0.5rem; }
    .prospect-item .name { font-size: 1rem; flex-basis: 100%; }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    .draft-sidebar h2, .clock-panel h2, .current-team { font-size: 1.25rem; }
    .team-pick { padding: 0.5rem; height: auto; }
    .pick-num { min-width: 1.5rem; }
    .team-logo { max-width: 20px; }
    .prospect-item .rank { min-width: 2rem; }
    .school-logo { max-width: 25px; }
}