/* ============================================
   MMA.SOCIAL - Rankings Filter Component
   ============================================ */

.rf-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary, #101018);
    border: 1px solid var(--border, #252535);
    border-radius: 10px;
    margin-bottom: 20px;
}

.rf-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Search */
.rf-search {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.rf-search-input {
    padding: 7px 12px;
    background: var(--bg-tertiary, #1a1a2e);
    border: 1px solid var(--border, #252535);
    border-radius: 6px;
    color: var(--text-primary, #e8e8f0);
    font-size: 0.85rem;
    width: 180px;
    outline: none;
    transition: border-color 0.2s;
}

.rf-search-input:focus {
    border-color: var(--accent-gold, #E8B830);
}

.rf-search-btn {
    padding: 7px 14px;
    background: var(--accent-gold, #E8B830);
    color: #000;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.rf-search-btn:hover {
    opacity: 0.85;
}

/* Select dropdowns */
.rf-select {
    padding: 7px 28px 7px 12px;
    background: var(--bg-tertiary, #1a1a2e);
    border: 1px solid var(--border, #252535);
    border-radius: 6px;
    color: var(--text-primary, #e8e8f0);
    font-size: 0.82rem;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s;
}

.rf-select:hover,
.rf-select:focus {
    border-color: var(--accent-gold, #E8B830);
}

.rf-select-sm {
    padding: 7px 24px 7px 10px;
    font-size: 0.78rem;
}

/* Status tabs */
.rf-status-tabs {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border, #252535);
}

.rf-tab {
    padding: 6px 14px;
    font-size: 0.8rem;
    color: var(--text-muted, #606075);
    text-decoration: none;
    background: var(--bg-tertiary, #1a1a2e);
    transition: all 0.2s;
    border-right: 1px solid var(--border, #252535);
    white-space: nowrap;
}

.rf-tab:last-child {
    border-right: none;
}

.rf-tab:hover {
    color: var(--text-primary, #e8e8f0);
    background: var(--bg-hover, #1e1e32);
}

.rf-tab.active {
    background: var(--accent-gold, #E8B830);
    color: #000;
    font-weight: 600;
}

/* Sort */
.rf-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.rf-sort-label {
    font-size: 0.78rem;
    color: var(--text-muted, #606075);
    white-space: nowrap;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .rf-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px 12px;
    }

    .rf-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .rf-search {
        width: 100%;
    }

    .rf-search-input {
        flex: 1;
        width: auto;
    }

    .rf-select {
        width: 100%;
    }

    .rf-status-tabs {
        width: 100%;
    }

    .rf-tab {
        flex: 1;
        text-align: center;
    }

    .rf-sort {
        margin-left: 0;
        width: 100%;
    }

    .rf-sort .rf-select {
        flex: 1;
    }
}