/* ============================================
   /css/draftAutoPick.css
   ESPN-style single ranked list for auto picks
   ============================================ */

/* Hero Banner */
.hero-banner {
    margin: 0;
}

    .hero-banner img {
        display: block;
        width: 100%;
        height: auto;
    }

/* Header Row */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto 1.5rem;
    padding: 0 1rem;
    max-width: 800px;
}

    .header-row .page-title {
        font-size: 2rem;
        font-weight: 700;
        margin: 0;
    }

/* Buttons */
.auto-pick-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #D5D7DA;
    background: #FFF;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    text-decoration: none;
    font-weight: 500;
    color: #181D27;
    font-size: 14px;
    transition: background-color 0.2s, border-color 0.2s;
    cursor: pointer;
}

    .auto-pick-actions .btn:hover {
        background-color: #F5F5F5;
    }

.auto-pick-actions .btn-secondary {
    background-color: transparent;
    color: #717680;
}

    .auto-pick-actions .btn-secondary:hover {
        background-color: #F5F5F5;
    }

/* Content Area */
.auto-pick-content {
    padding: 0 1rem 2rem 1rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Loading */
.auto-pick-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: #717680;
    font-size: 15px;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #EAECF0;
    border-top-color: #4DC24D;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Error */
.auto-pick-error {
    padding: 16px 20px;
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: 12px;
    color: #991B1B;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

/* Locked Banner */
.auto-pick-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: #FEF3C7;
    border: 1px solid #F59E0B;
    border-radius: 12px;
    color: #92400E;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Instructions Banner */
.auto-pick-instructions {
    padding: 16px 20px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 12px;
    margin-bottom: 24px;
}

    .auto-pick-instructions p {
        margin: 0 0 12px 0;
        color: #166534;
        font-size: 14px;
    }

    .auto-pick-instructions ul {
        margin: 0;
        padding-left: 20px;
    }

    .auto-pick-instructions li {
        color: #166534;
        font-size: 13px;
        margin-bottom: 6px;
    }

        .auto-pick-instructions li:last-child {
            margin-bottom: 0;
        }

/* ========================
   Ranked List Container
   ======================== */
.ranked-list-container {
    background: #FFF;
    border: 1px solid #D5D7DA;
    border-radius: 12px;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Section Headers (MVP / Draft Order dividers) */
.ranked-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #F9FAFB;
    border-bottom: 1px solid #EAECF0;
}

    .ranked-section-header:not(:first-child) {
        border-top: 2px solid #EAECF0;
    }

.ranked-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #181D27;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .ranked-section-title svg {
        flex-shrink: 0;
    }

    .ranked-section-title.mvp-title svg {
        color: #F59E0B;
    }

    .ranked-section-title.draft-title svg {
        color: #4DC24D;
    }

.ranked-section-count {
    font-size: 12px;
    font-weight: 600;
    color: #717680;
    background: #EAECF0;
    padding: 3px 10px;
    border-radius: 20px;
}

/* ========================
   Ranked Items
   ======================== */
.ranked-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #F3F4F6;
    transition: background-color 0.15s;
    user-select: none;
    cursor: grab;
}

    .ranked-item:active {
        cursor: grabbing;
    }

    .ranked-item:hover {
        background: #F9FAFB;
    }

    /* MVP-styled items (top 2) */
    .ranked-item.is-mvp {
        background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    }

        .ranked-item.is-mvp:hover {
            background: linear-gradient(135deg, #FEF9C3 0%, #FDE68A 100%);
        }

    /* Drag states */
    .ranked-item.dragging {
        opacity: 0.4;
        background: #E5E7EB !important;
    }

    .ranked-item.drop-above {
        box-shadow: inset 0 3px 0 0 #4DC24D;
    }

    .ranked-item.drop-below {
        box-shadow: inset 0 -3px 0 0 #4DC24D;
    }

/* Locked state */
.ranked-list.is-locked .ranked-item {
    cursor: default;
}

    .ranked-list.is-locked .ranked-item:active {
        cursor: default;
    }

.ranked-list.is-locked .drag-handle {
    opacity: 0.15;
    cursor: default;
}

/* ========================
   Item Elements
   ======================== */

/* Drag Handle (6-dot grip) */
.drag-handle {
    color: #C0C5CC;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 4px 2px;
    transition: color 0.15s;
}

.ranked-item:hover .drag-handle {
    color: #717680;
}

/* Rank Badge */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #181D27;
    color: #FFF;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.ranked-item.is-mvp .rank-badge {
    background: #D97706;
}

/* Avatar */
.item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #888888;
    flex-shrink: 0;
}

/* Name */
.item-name {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 600;
    color: #181D27;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* MVP Tag */
.mvp-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #F59E0B;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #92400E;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Empty State */
.ranked-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #9CA3AF;
    font-size: 14px;
    font-style: italic;
}

/* ========================
   Save Section
   ======================== */
.auto-pick-save-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.btn-save {
    padding: 12px 28px;
    background-color: #4DC24D;
    border: 1px solid #4DC24D;
    border-radius: 10px;
    color: #FFF;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
}

    .btn-save:hover:not(:disabled) {
        background-color: #3DB43D;
        border-color: #3DB43D;
    }

    .btn-save:disabled,
    .btn-save.disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-save.loading {
        opacity: 0.7;
        pointer-events: none;
    }

.save-status {
    font-size: 14px;
    font-weight: 600;
}

    .save-status.success {
        color: #16A34A;
    }

    .save-status.error {
        color: #DC2626;
    }

/* ========================
   Responsive
   ======================== */
@media (max-width: 600px) {
    .header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .auto-pick-actions {
        margin-top: 1rem;
    }

    .auto-pick-save-section {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-save {
        width: 100%;
    }

    .item-avatar {
        width: 36px;
        height: 36px;
    }

    .ranked-item {
        padding: 8px 12px;
        gap: 8px;
    }

    .rank-badge {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .mvp-tag {
        padding: 2px 8px;
        font-size: 10px;
    }
}