/* Subreddit Ranking Widget - Frontend Styles */

:root {
    --srw-bg-primary: #ffffff;
    --srw-bg-secondary: #f8f9fa;
    --srw-bg-accent: #eef0f2;
    --srw-text-primary: #4a5568;
    --srw-text-secondary: #718096;
    --srw-text-dark: #1a202c;
    --srw-border: #e2e8f0;
    --srw-border-radius: 12px;
    --srw-accent: #4a90d9;
    --srw-accent-light: rgba(74, 144, 217, 0.08);
    --srw-green: #38a169;
    --srw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="dark"] {
    --srw-bg-primary: #1a1a2e;
    --srw-bg-secondary: #222240;
    --srw-bg-accent: #2d2d4a;
    --srw-text-primary: #cbd5e0;
    --srw-text-secondary: #a0aec0;
    --srw-text-dark: #f7fafc;
    --srw-border: #3a3a5c;
    --srw-accent: #63b3ed;
    --srw-accent-light: rgba(99, 179, 237, 0.1);
    --srw-green: #68d391;
}

.srw-rankings-container {
    font-family: var(--srw-font-family);
    font-size: 15px;
    color: var(--srw-text-primary);
    background: var(--srw-bg-primary);
    border-radius: var(--srw-border-radius);
    border: 1px solid var(--srw-border);
    padding: 24px;
    margin: 20px 0;
    box-sizing: border-box;
}

.srw-rankings-container *,
.srw-rankings-container *::before,
.srw-rankings-container *::after {
    box-sizing: border-box;
}

/* ═══════ Controls Bar ═══════ */
.srw-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--srw-border);
}

/* Search Input */
.srw-search-input {
    width: 100%;
    max-width: 480px;
    padding: 10px 16px;
    border: 1px solid var(--srw-border);
    border-radius: 24px;
    font-size: 14px;
    background: var(--srw-bg-secondary);
    color: var(--srw-text-primary);
    font-family: var(--srw-font-family);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.srw-search-input:focus {
    border-color: var(--srw-accent);
    box-shadow: 0 0 0 3px var(--srw-accent-light);
}

/* Tabs */
.srw-tabs {
    display: flex;
    gap: 2px;
    background: var(--srw-bg-accent);
    border-radius: 8px;
    padding: 3px;
}

.srw-tab {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--srw-text-secondary);
    cursor: pointer;
    font-family: var(--srw-font-family);
    transition: all 0.2s;
    white-space: nowrap;
}

.srw-tab:hover {
    color: var(--srw-text-dark);
    background: var(--srw-bg-primary);
}

.srw-tab.active {
    background: var(--srw-bg-primary);
    color: var(--srw-text-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

/* Size Filters */
.srw-size-filters {
    display: flex;
    gap: 6px;
}

.srw-filter-btn {
    background: transparent;
    border: 1px solid var(--srw-border);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--srw-text-secondary);
    cursor: pointer;
    font-family: var(--srw-font-family);
    transition: all 0.2s;
    white-space: nowrap;
}

.srw-filter-btn:hover {
    border-color: var(--srw-accent);
    color: var(--srw-accent);
}

.srw-filter-btn.active {
    background: var(--srw-accent);
    color: #ffffff;
    border-color: var(--srw-accent);
}

/* ═══════ Age Gate ═══════ */
.srw-age-gate {
    position: relative;
    background: var(--srw-bg-secondary);
    border-radius: var(--srw-border-radius);
    padding: 32px;
    text-align: center;
    margin-bottom: 16px;
    border: 1px solid var(--srw-border);
}

.srw-age-gate-content p {
    color: var(--srw-text-primary);
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 500;
}

.srw-age-yes {
    background: var(--srw-green);
    color: #ffffff;
    padding: 9px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--srw-font-family);
    margin-right: 10px;
    transition: opacity 0.2s;
}

.srw-age-yes:hover {
    opacity: 0.9;
}

.srw-age-no {
    background: var(--srw-bg-accent);
    color: var(--srw-text-primary);
    padding: 9px 24px;
    border-radius: 8px;
    border: 1px solid var(--srw-border);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--srw-font-family);
    transition: background 0.2s;
}

.srw-age-no:hover {
    background: var(--srw-bg-secondary);
}

/* ═══════ States ═══════ */
.srw-no-results {
    padding: 40px 20px;
    text-align: center;
    color: var(--srw-text-secondary);
    font-size: 14px;
}

.srw-loading {
    padding: 40px 20px;
    text-align: center;
    color: var(--srw-text-secondary);
    font-size: 14px;
}

/* ═══════ Columns Layout ═══════ */
.srw-columns-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

/* Force pagination bar to its own row below columns */
.srw-columns-layout > .srw-server-pagination {
    flex-basis: 100%;
    margin-top: 4px;
}

.srw-column {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    background: var(--srw-bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--srw-border);
}

.srw-column-title {
    font-size: 11px;
    letter-spacing: 0.08em;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--srw-border);
    color: var(--srw-text-secondary);
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}

/* Single Layout */
.srw-single-layout .srw-column {
    max-width: 600px;
    margin: 0 auto;
}

/* ═══════ Subreddit List ═══════ */
.srw-subreddit-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.srw-subreddit-item {
    display: flex;
    align-items: center;
    padding: 8px 6px;
    border-radius: 6px;
    transition: background 0.15s;
}

.srw-subreddit-item:hover {
    background: var(--srw-accent-light);
}

.srw-subreddit-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    width: 100%;
    min-width: 0;
}

.srw-subreddit-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    min-width: 0;
}

.srw-rank {
    font-size: 11px;
    color: var(--srw-text-secondary);
    font-weight: 600;
    min-width: 28px;
    flex-shrink: 0;
}

a.srw-subreddit-name {
    color: var(--srw-text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

a.srw-subreddit-name:hover {
    color: var(--srw-accent);
    text-decoration: none;
}

.srw-subscribers {
    font-size: 11px;
    color: var(--srw-text-secondary);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 500;
}

.srw-growth {
    font-size: 11px;
    color: var(--srw-green);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════ NSFW Mode — red-pink subreddit names ═══════ */
.srw-nsfw-mode a.srw-subreddit-name {
    color: #e8456b;
}

.srw-nsfw-mode a.srw-subreddit-name:hover {
    color: #d63054;
}

/* ═══════ Error State ═══════ */
.srw-error {
    background: #fff5f5;
    color: #c53030;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    margin: 15px 0;
    border: 1px solid #fed7d7;
    font-size: 14px;
}

/* ═══════ Client-side Pagination (legacy) ═══════ */
.srw-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 0 4px;
    margin-top: 8px;
    border-top: 1px solid var(--srw-border);
}

.srw-page-btn {
    background: var(--srw-bg-accent);
    border: 1px solid var(--srw-border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    color: var(--srw-text-primary);
    cursor: pointer;
    font-family: var(--srw-font-family);
    transition: background 0.15s, color 0.15s;
}

.srw-page-btn:hover:not(:disabled) {
    background: var(--srw-bg-secondary);
    color: var(--srw-text-dark);
}

.srw-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.srw-page-btn.active {
    background: var(--srw-text-dark);
    color: var(--srw-bg-primary);
    border-color: var(--srw-text-dark);
}

/* ═══════ Server-side Pagination Bar ═══════ */
.srw-server-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0 4px;
}

.srw-srv-prev,
.srw-srv-next {
    background: var(--srw-bg-secondary);
    border: 1px solid var(--srw-border);
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--srw-text-primary);
    cursor: pointer;
    font-family: var(--srw-font-family);
    transition: all 0.2s;
}

.srw-srv-prev:hover:not(:disabled),
.srw-srv-next:hover:not(:disabled) {
    border-color: var(--srw-accent);
    color: var(--srw-accent);
    background: var(--srw-accent-light);
}

.srw-srv-prev:disabled,
.srw-srv-next:disabled {
    opacity: 0.35;
    cursor: default;
}

.srw-srv-page-info {
    font-size: 13px;
    color: var(--srw-text-secondary);
    font-weight: 500;
    min-width: 60px;
    text-align: center;
}

/* ═══════ Responsive ═══════ */
@media screen and (max-width: 768px) {
    .srw-rankings-container {
        padding: 16px;
        border-radius: 10px;
    }

    .srw-columns-layout {
        flex-direction: column;
        gap: 16px;
    }

    .srw-search-input {
        max-width: 100%;
    }

    .srw-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }

    .srw-size-filters {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .srw-rankings-container {
        padding: 12px;
        margin: 10px 0;
    }

    .srw-subreddit-item {
        padding: 8px 4px;
    }

    .srw-rank {
        min-width: 24px;
        font-size: 10px;
    }

    a.srw-subreddit-name {
        font-size: 12px;
    }

    .srw-tabs {
        width: 100%;
    }

    .srw-tab {
        flex: 1;
        text-align: center;
        padding: 7px 10px;
        font-size: 12px;
    }

    .srw-size-filters {
        width: 100%;
    }

    .srw-filter-btn {
        flex: 1;
        text-align: center;
    }
}

/* ═══════ Dark theme auto-detection ═══════ */
@media (prefers-color-scheme: dark) {
    .srw-rankings-container[data-theme="auto"] {
        --srw-bg-primary: #1a1a2e;
        --srw-bg-secondary: #222240;
        --srw-bg-accent: #2d2d4a;
        --srw-text-primary: #cbd5e0;
        --srw-text-secondary: #a0aec0;
        --srw-text-dark: #f7fafc;
        --srw-border: #3a3a5c;
        --srw-accent: #63b3ed;
        --srw-accent-light: rgba(99, 179, 237, 0.1);
        --srw-green: #68d391;
    }

    .srw-rankings-container[data-theme="auto"] a.srw-subreddit-name {
        color: #f7fafc;
    }

    .srw-rankings-container[data-theme="auto"] a.srw-subreddit-name:hover {
        color: #63b3ed;
    }
}

[data-theme="dark"] a.srw-subreddit-name {
    color: #f7fafc;
}

[data-theme="dark"] a.srw-subreddit-name:hover {
    color: #63b3ed;
}

/* NSFW mode in dark theme */
[data-theme="dark"].srw-nsfw-mode a.srw-subreddit-name,
.srw-nsfw-mode[data-theme="auto"] a.srw-subreddit-name {
    color: #f06292;
}

[data-theme="dark"].srw-nsfw-mode a.srw-subreddit-name:hover,
.srw-nsfw-mode[data-theme="auto"] a.srw-subreddit-name:hover {
    color: #ec407a;
}