/**
 * Rudy Forum Lite — Stijlen
 *
 * @package Rudy_Forum_Lite
 * @since   0.1.0
 */

/* ── CSS variabelen ──────────────────────────────────────────────────────── */

:root {
    --rfl-primary: #0073aa;
    --rfl-primary-dark: #005f8a;
    --rfl-primary-light: #e8f4fa;
    --rfl-border: #e2e8f0;
    --rfl-border-dark: #cbd5e1;
    --rfl-bg: #f8fafc;
    --rfl-bg-white: #ffffff;
    --rfl-text: #1e293b;
    --rfl-text-muted: #64748b;
    --rfl-text-light: #94a3b8;
    --rfl-radius: 8px;
    --rfl-radius-sm: 4px;
    --rfl-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
    --rfl-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .05);
    --rfl-sticky-bg: #fffbeb;
    --rfl-closed-opacity: 0.6;
    --rfl-error: #dc2626;
    --rfl-error-bg: #fef2f2;
    --rfl-success: #16a34a;
    --rfl-success-bg: #f0fdf4;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.rfl-forum-index,
.rfl-forum-category,
.rfl-forum-topic,
.rfl-new-topic-form-wrapper {
    max-width: 860px;
    margin: 0 auto;
    color: var(--rfl-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

.rfl-forum-header {
    margin-bottom: 1.5rem;
}

.rfl-forum-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.rfl-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.rfl-category-description {
    margin: 0.25rem 0 0;
    color: var(--rfl-text-muted);
    font-size: 0.9rem;
}

.rfl-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--rfl-text-muted);
    text-decoration: none;
}

.rfl-back-link:hover {
    color: var(--rfl-primary);
}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */

.rfl-forum-index .rfl-button,
.rfl-forum-category .rfl-button,
.rfl-forum-topic .rfl-button,
.rfl-new-topic-form-wrapper .rfl-button,
.rfl-profile .rfl-button,
.rfl-profile-edit .rfl-button,
.rfl-auth-wrapper .rfl-button,
a.rfl-button,
button.rfl-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--rfl-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
    line-height: 1.4;
    box-sizing: border-box;
}

.rfl-forum-index .rfl-button-primary,
.rfl-forum-category .rfl-button-primary,
.rfl-forum-topic .rfl-button-primary,
.rfl-new-topic-form-wrapper .rfl-button-primary,
.rfl-profile .rfl-button-primary,
.rfl-profile-edit .rfl-button-primary,
.rfl-auth-wrapper .rfl-button-primary,
a.rfl-button-primary,
button.rfl-button-primary {
    background: var(--rfl-primary);
    color: #fff;
    border-color: var(--rfl-primary);
}

.rfl-forum-index .rfl-button-primary:hover,
.rfl-forum-category .rfl-button-primary:hover,
.rfl-forum-topic .rfl-button-primary:hover,
.rfl-new-topic-form-wrapper .rfl-button-primary:hover,
.rfl-profile .rfl-button-primary:hover,
.rfl-profile-edit .rfl-button-primary:hover,
.rfl-auth-wrapper .rfl-button-primary:hover,
a.rfl-button-primary:hover,
button.rfl-button-primary:hover {
    background: var(--rfl-primary-dark);
    border-color: var(--rfl-primary-dark);
    color: #fff;
    text-decoration: none;
}

.rfl-forum-index .rfl-button-secondary,
.rfl-forum-category .rfl-button-secondary,
.rfl-forum-topic .rfl-button-secondary,
.rfl-new-topic-form-wrapper .rfl-button-secondary,
.rfl-profile .rfl-button-secondary,
.rfl-profile-edit .rfl-button-secondary,
.rfl-auth-wrapper .rfl-button-secondary,
a.rfl-button-secondary,
button.rfl-button-secondary {
    background: var(--rfl-bg-white);
    color: var(--rfl-primary);
    border-color: var(--rfl-primary);
}

.rfl-forum-index .rfl-button-secondary:hover,
.rfl-forum-category .rfl-button-secondary:hover,
.rfl-forum-topic .rfl-button-secondary:hover,
.rfl-new-topic-form-wrapper .rfl-button-secondary:hover,
.rfl-profile .rfl-button-secondary:hover,
.rfl-profile-edit .rfl-button-secondary:hover,
.rfl-auth-wrapper .rfl-button-secondary:hover,
a.rfl-button-secondary:hover,
button.rfl-button-secondary:hover {
    background: var(--rfl-primary-light);
    text-decoration: none;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.rfl-badge {
    display: inline-block;
    padding: 0.15em 0.55em;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.4em;
    vertical-align: middle;
}

.rfl-badge-sticky {
    background: #fef9c3;
    color: #854d0e;
}

.rfl-badge-closed {
    background: #f1f5f9;
    color: #64748b;
}

/* ── Lege staat / fout ───────────────────────────────────────────────────── */

.rfl-empty {
    padding: 2rem;
    text-align: center;
    color: var(--rfl-text-muted);
    background: var(--rfl-bg);
    border: 1px dashed var(--rfl-border-dark);
    border-radius: var(--rfl-radius);
}

.rfl-error {
    padding: 0.75rem 1rem;
    color: var(--rfl-error);
    background: var(--rfl-error-bg);
    border: 1px solid #fca5a5;
    border-radius: var(--rfl-radius-sm);
}

/* ── Notices ─────────────────────────────────────────────────────────────── */

.rfl-notice {
    padding: 0.75rem 1rem;
    border-radius: var(--rfl-radius-sm);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    border-left: 3px solid;
}

.rfl-notice-closed {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #475569;
}

.rfl-notice-error {
    background: var(--rfl-error-bg);
    border-color: var(--rfl-error);
    color: var(--rfl-error);
}

.rfl-notice-success {
    background: var(--rfl-success-bg);
    border-color: var(--rfl-success);
    color: var(--rfl-success);
}

/* ── Forum Index ─────────────────────────────────────────────────────────── */

.rfl-category-list {
    border: 1px solid var(--rfl-border);
    border-radius: var(--rfl-radius);
    overflow: hidden;
    box-shadow: var(--rfl-shadow);
    background: var(--rfl-bg-white);
}

.rfl-category-row {
    display: grid;
    grid-template-columns: 1fr 110px 210px;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--rfl-border);
    transition: background .12s;
}

.rfl-category-row:last-child {
    border-bottom: none;
}

.rfl-category-row:hover {
    background: var(--rfl-bg);
}

.rfl-category-name {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
}

.rfl-category-name a {
    color: var(--rfl-text);
    text-decoration: none;
}

.rfl-category-name a:hover {
    color: var(--rfl-primary);
}

.rfl-category-stats {
    text-align: center;
    font-size: 0.875rem;
    color: var(--rfl-text-muted);
}

.rfl-category-stats strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rfl-text);
    line-height: 1.2;
}

.rfl-category-latest {
    font-size: 0.825rem;
    color: var(--rfl-text-muted);
}

.rfl-latest-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

.rfl-latest-link {
    display: block;
    color: var(--rfl-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
    font-weight: 500;
}

.rfl-latest-link:hover {
    color: var(--rfl-primary-dark);
}

.rfl-latest-date {
    display: block;
    margin-top: 0.15rem;
}

.rfl-no-topics {
    font-style: italic;
}

/* ── Forum Category ──────────────────────────────────────────────────────── */

.rfl-topic-list {
    border: 1px solid var(--rfl-border);
    border-radius: var(--rfl-radius);
    overflow: hidden;
    box-shadow: var(--rfl-shadow);
    background: var(--rfl-bg-white);
}

.rfl-topic-list-header,
.rfl-topic-row {
    display: grid;
    grid-template-columns: 1fr 80px 130px 140px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 1.25rem;
}

.rfl-topic-list-header {
    background: var(--rfl-bg);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--rfl-text-muted);
    border-bottom: 1px solid var(--rfl-border);
}

.rfl-topic-row {
    border-bottom: 1px solid var(--rfl-border);
    transition: background .12s;
}

.rfl-topic-row:last-child {
    border-bottom: none;
}

.rfl-topic-row:hover {
    background: var(--rfl-bg);
}

.rfl-topic-row.rfl-topic-sticky {
    background: var(--rfl-sticky-bg);
}

.rfl-topic-row.rfl-topic-sticky:hover {
    background: #fef3c7;
}

.rfl-topic-row.rfl-topic-closed {
    opacity: var(--rfl-closed-opacity);
}

.rfl-topic-title {
    font-weight: 600;
    color: var(--rfl-text);
    text-decoration: none;
    font-size: 0.95rem;
}

.rfl-topic-title:hover {
    color: var(--rfl-primary);
}

/* Auteur profiellinks */
.rfl-author-link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.rfl-author-link:hover {
    color: var(--rfl-primary);
    text-decoration: underline;
}

.rfl-col-replies,
.rfl-col-author,
.rfl-col-activity {
    font-size: 0.85rem;
    color: var(--rfl-text-muted);
}

/* ── Paginering ──────────────────────────────────────────────────────────── */

.rfl-pagination {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.rfl-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.6rem;
    border: 1px solid var(--rfl-border-dark);
    border-radius: var(--rfl-radius-sm);
    text-decoration: none;
    font-size: 0.875rem;
    color: var(--rfl-text);
    background: var(--rfl-bg-white);
    transition: background .15s, border-color .15s;
}

.rfl-pagination .page-numbers:hover {
    background: var(--rfl-bg);
    border-color: var(--rfl-primary);
    color: var(--rfl-primary);
}

.rfl-pagination .page-numbers.current {
    background: var(--rfl-primary);
    color: #fff;
    border-color: var(--rfl-primary);
    font-weight: 600;
}

.rfl-pagination .page-numbers.dots {
    border: none;
    background: none;
}

/* ── Forum Topic ─────────────────────────────────────────────────────────── */

.rfl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    font-size: 0.825rem;
    color: var(--rfl-text-muted);
}

.rfl-breadcrumb a {
    color: var(--rfl-text-muted);
    text-decoration: none;
}

.rfl-breadcrumb a:hover {
    color: var(--rfl-primary);
}

/* ── Topic kop ───────────────────────────────────────────────────────────── */

.rfl-topic-header {
    margin-bottom: 1.25rem;
}

.rfl-topic-title-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.rfl-forum-topic .rfl-topic-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--rfl-text);
    flex: 1 1 auto;
}

/* Stats-balk onder de titel */
.rfl-topic-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: 0.82rem;
    color: var(--rfl-text-muted);
}

.rfl-stat {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.rfl-stat-icon {
    font-size: 0.9em;
    line-height: 1;
}

.rfl-stat a {
    color: var(--rfl-primary);
    text-decoration: none;
}

.rfl-stat a:hover {
    text-decoration: underline;
}

/* ── Post-thread: originele post + replies als cards ─────────────────────── */

.rfl-post-thread {
    border: 1px solid var(--rfl-border);
    border-radius: var(--rfl-radius);
    overflow: hidden;
    box-shadow: var(--rfl-shadow);
    margin-bottom: 2rem;
}

/* Elk bericht (originele post of reply) */
.rfl-post {
    display: grid;
    grid-template-columns: 100px 1fr;
    border-bottom: 1px solid var(--rfl-border);
}

.rfl-post:last-child {
    border-bottom: none;
}

/* ── Auteur kolom (links) ─── */
.rfl-post-author-col {
    background: var(--rfl-bg);
    padding: 1.1rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    border-right: 1px solid var(--rfl-border);
}

.rfl-post-avatar {
    border-radius: 50%;
    display: block;
    width: 56px !important;
    height: 56px !important;
    object-fit: cover;
}

.rfl-post-author-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--rfl-text);
    word-break: break-word;
}

.rfl-post-author-name a {
    color: var(--rfl-primary);
    text-decoration: none;
}

.rfl-post-author-name a:hover {
    text-decoration: underline;
}

.rfl-post-author-meta {
    font-size: 0.72rem;
    color: var(--rfl-text-muted);
}

/* ── Post inhoud (rechts) ─── */
.rfl-post-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rfl-post-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--rfl-bg);
    border-bottom: 1px solid var(--rfl-border);
    font-size: 0.78rem;
    color: var(--rfl-text-muted);
}

.rfl-post-date {
    /* datum links */
}

.rfl-post-permalink {
    color: var(--rfl-text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.1em 0.45em;
    border: 1px solid var(--rfl-border);
    border-radius: 3px;
    transition: color 0.12s, border-color 0.12s;
}

.rfl-post-permalink:hover {
    color: var(--rfl-primary);
    border-color: var(--rfl-primary);
}

.rfl-post-content {
    flex: 1;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--rfl-text);
}

/* Reset: zorg dat het thema geen rogue h1/p/a stijlen injecteert in de post-content */
.rfl-post-content > *:first-child { margin-top: 0; }
.rfl-post-content > *:last-child  { margin-bottom: 0; }

.rfl-post-content code {
    background: #f1f5f9;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.875em;
}

.rfl-post-content pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: var(--rfl-radius-sm);
    overflow-x: auto;
    font-size: 0.875em;
    line-height: 1.6;
}

/* Originele post licht onderscheiden */
.rfl-post-original .rfl-post-author-col {
    background: color-mix(in srgb, var(--rfl-primary) 5%, var(--rfl-bg));
}

/* Replies-tussenkop */
.rfl-replies-heading {
    padding: 0.5rem 1rem;
    background: var(--rfl-bg);
    border-bottom: 2px solid var(--rfl-border);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--rfl-text-muted);
    border-top: 2px solid var(--rfl-border);
}

/* ── Formulieren ─────────────────────────────────────────────────────────── */

.rfl-form-field {
    margin-bottom: 1.25rem;
}

.rfl-form-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rfl-text);
}

.rfl-required {
    color: var(--rfl-error);
    margin-left: 2px;
}

.rfl-input,
.rfl-select,
.rfl-textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--rfl-border-dark);
    border-radius: var(--rfl-radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--rfl-bg-white);
    color: var(--rfl-text);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.rfl-input:focus,
.rfl-select:focus,
.rfl-textarea:focus {
    outline: none;
    border-color: var(--rfl-primary);
    box-shadow: 0 0 0 3px rgba(0, 115, 170, .15);
}

.rfl-textarea {
    resize: vertical;
}

.rfl-form-actions {
    margin-top: 1.25rem;
}

/* ── Editor toolbar ──────────────────────────────────────────────────────── */

.rfl-editor-wrapper {
    border: 1px solid var(--rfl-border-dark);
    border-radius: var(--rfl-radius-sm);
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}

.rfl-editor-wrapper:focus-within {
    border-color: var(--rfl-primary);
    box-shadow: 0 0 0 3px rgba(0, 115, 170, .15);
}

.rfl-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.6rem;
    background: var(--rfl-bg);
    border-bottom: 1px solid var(--rfl-border);
}

.rfl-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--rfl-radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--rfl-text-muted);
    transition: background .12s, color .12s, border-color .12s;
    line-height: 1;
}

.rfl-toolbar-btn:hover {
    background: var(--rfl-bg-white);
    border-color: var(--rfl-border-dark);
    color: var(--rfl-text);
}

.rfl-toolbar-btn:active {
    background: var(--rfl-primary-light);
    color: var(--rfl-primary);
    border-color: var(--rfl-primary);
}

.rfl-toolbar-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--rfl-border-dark);
    margin: 0 0.25rem;
}

.rfl-editor-textarea {
    border: none;
    border-radius: 0;
    box-shadow: none !important;
    resize: vertical;
    min-height: 200px;
}

.rfl-editor-textarea:focus {
    outline: none;
    box-shadow: none !important;
    border: none;
}

/* ── Nieuw topic wrapper ─────────────────────────────────────────────────── */

.rfl-new-topic-form-wrapper {
    background: var(--rfl-bg-white);
    border: 1px solid var(--rfl-border);
    border-radius: var(--rfl-radius);
    padding: 1.75rem 2rem;
    box-shadow: var(--rfl-shadow-md);
}

.rfl-form-title {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rfl-border);
}

/* ── Reply formulier ─────────────────────────────────────────────────────── */

.rfl-reply-form-wrapper {
    background: var(--rfl-bg-white);
    border: 1px solid var(--rfl-border);
    border-radius: var(--rfl-radius);
    padding: 1.5rem;
    box-shadow: var(--rfl-shadow);
}

.rfl-reply-form-title {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    font-weight: 700;
}

.rfl-login-prompt {
    padding: 1.25rem;
    background: var(--rfl-bg);
    border: 1px solid var(--rfl-border);
    border-radius: var(--rfl-radius);
    text-align: center;
    color: var(--rfl-text-muted);
    font-size: 0.9rem;
}

/* ── Subcategorieën ──────────────────────────────────────────────────────── */

.rfl-category-group {
    border-bottom: 1px solid var(--rfl-border);
}

.rfl-category-group:last-child {
    border-bottom: none;
}

.rfl-category-row-parent {
    border-bottom: none;
}

.rfl-subcategory-list {
    background: var(--rfl-bg);
    border-top: 1px solid var(--rfl-border);
}

.rfl-category-row-sub {
    border-bottom: 1px solid var(--rfl-border);
    padding-left: 2.5rem;
}

.rfl-category-row-sub:last-child {
    border-bottom: none;
}

.rfl-category-row-sub .rfl-category-name {
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.rfl-sub-indicator {
    color: var(--rfl-text-light);
    margin-right: 0.4rem;
    font-size: 0.9rem;
}

/* Subcategorie blok op categoriepagina */
.rfl-subcategory-block {
    margin-bottom: 1.5rem;
}

.rfl-subcategory-block-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--rfl-text-muted);
    margin: 0 0 0.6rem;
}

.rfl-subcategory-list-inline .rfl-category-row-sub {
    padding-left: 1.25rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .rfl-category-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .rfl-category-stats,
    .rfl-category-latest {
        display: none;
    }

    .rfl-topic-list-header {
        display: none;
    }

    .rfl-topic-row {
        grid-template-columns: 1fr 1fr;
    }

    .rfl-col-topic {
        grid-column: 1 / -1;
    }

    .rfl-col-author {
        display: none;
    }

    .rfl-topic-meta {
        flex-direction: column;
        gap: 0.2rem;
    }

    .rfl-new-topic-form-wrapper {
        padding: 1.25rem;
    }

    .rfl-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Post-cards op mobiel: auteurkolom verbergen, boven de inhoud tonen */
    .rfl-post {
        grid-template-columns: 1fr;
    }

    .rfl-post-author-col {
        flex-direction: row;
        justify-content: flex-start;
        border-right: none;
        border-bottom: 1px solid var(--rfl-border);
        padding: 0.65rem 1rem;
        gap: 0.6rem;
    }

    .rfl-post-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    .rfl-post-author-meta {
        display: none;
    }
}

/* ── Forum Index — bbPress-stijl tabel ───────────────────────────────────── */

.rfl-index-table {
    border: 1px solid var(--rfl-border);
    border-radius: var(--rfl-radius);
    overflow: hidden;
    box-shadow: var(--rfl-shadow);
    background: var(--rfl-bg-white);
}

/* Gedeeld grid: info | topics | replies | laatste bericht */
.rfl-index-header,
.rfl-index-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) 80px 80px 200px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.9rem 1.25rem;
}

/* ── Kolomkoppen ─── */
.rfl-index-header {
    background: var(--rfl-bg);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--rfl-text-muted);
    border-bottom: 2px solid var(--rfl-border);
}

/* ── Groep (parent + subs) ─── */
.rfl-index-group {
    border-bottom: 1px solid var(--rfl-border);
}

.rfl-index-group:last-child {
    border-bottom: none;
}

/* ── Parent rij ─── */
.rfl-index-row-parent {
    background: var(--rfl-bg-white);
    transition: background .12s;
}

.rfl-index-row-parent:hover {
    background: var(--rfl-bg);
}

/* ── Categorie info kolom ─── */
.rfl-index-cat-name {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.rfl-index-cat-name a {
    color: var(--rfl-text);
    text-decoration: none;
}

.rfl-index-cat-name a:hover {
    color: var(--rfl-primary);
}

.rfl-index-subcat-name {
    font-size: 0.875rem;
    font-weight: 500;
    display: inline;
}

.rfl-index-sub-arrow {
    color: var(--rfl-text-light);
    margin-right: 0.35rem;
    font-size: 0.85rem;
}

.rfl-index-cat-desc {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--rfl-text-muted);
    line-height: 1.45;
}

/* Subcategorie-links onder de parent naam — bbPress stijl */
.rfl-index-subcats-inline {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    color: var(--rfl-text-muted);
    line-height: 1.6;
}

.rfl-index-subcat-link {
    color: var(--rfl-primary);
    text-decoration: none;
    font-weight: 500;
}

.rfl-index-subcat-link:hover {
    text-decoration: underline;
}

.rfl-index-subcat-counts {
    color: var(--rfl-text-muted);
    margin-right: 0.6rem;
}

/* ── Count kolommen ─── */
.rfl-index-col-count {
    text-align: center;
    font-size: 0.85rem;
    color: var(--rfl-text-muted);
}

.rfl-index-col-count strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rfl-text);
    line-height: 1.2;
}

/* ── Laatste bericht kolom ─── */
.rfl-index-col-latest {
    font-size: 0.825rem;
    min-width: 0;
}

.rfl-index-latest-title {
    display: block;
    font-weight: 600;
    color: var(--rfl-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.rfl-index-latest-title:hover {
    color: var(--rfl-primary-dark);
    text-decoration: underline;
}

.rfl-index-latest-meta {
    display: block;
    color: var(--rfl-text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rfl-index-no-posts {
    color: var(--rfl-text-light);
    font-style: italic;
    font-size: 0.825rem;
}

/* ── Responsive ─── */
@media (max-width: 640px) {
    .rfl-index-header,
    .rfl-index-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 0.85rem 1rem;
    }

    .rfl-index-header .rfl-index-col-count,
    .rfl-index-header .rfl-index-col-latest {
        display: none;
    }

    .rfl-index-col-count,
    .rfl-index-col-latest {
        display: none;
    }
}

/* ── Profiel ─────────────────────────────────────────────────────────────── */

.rfl-profile {
    max-width: 860px;
    margin: 0 auto;
    color: var(--rfl-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

.rfl-profile .rfl-profile-header {
    display: flex !important;
    gap: 1.5rem;
    align-items: flex-start !important;
    padding: 1.75rem !important;
    background: var(--rfl-bg-white) !important;
    border: 1px solid var(--rfl-border) !important;
    border-radius: var(--rfl-radius) !important;
    box-shadow: var(--rfl-shadow) !important;
    margin-bottom: 1.25rem !important;
}

.rfl-profile .rfl-avatar-img {
    border-radius: 50%;
    display: block;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}

.rfl-profile .rfl-profile-info {
    flex: 1;
    min-width: 0;
}

.rfl-profile .rfl-profile-name {
    margin: 0 0 0.25rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.rfl-profile .rfl-profile-joined {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--rfl-text-muted);
}

.rfl-profile .rfl-profile-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.75rem;
    padding: 0;
    list-style: none;
}

.rfl-profile .rfl-social-link {
    font-size: 0.85rem;
    color: var(--rfl-primary);
    text-decoration: none;
}

.rfl-profile .rfl-social-link:hover {
    text-decoration: underline;
}

.rfl-profile .rfl-profile-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
    background: var(--rfl-bg);
    border: 1px solid var(--rfl-border-dark);
    border-radius: var(--rfl-radius-sm);
    color: var(--rfl-text);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.rfl-profile .rfl-profile-edit-btn:hover {
    background: var(--rfl-border);
    border-color: var(--rfl-text-muted);
    color: var(--rfl-text);
    text-decoration: none;
}

.rfl-profile .rfl-profile-bio {
    padding: 1.25rem 1.5rem;
    background: var(--rfl-bg);
    border: 1px solid var(--rfl-border);
    border-radius: var(--rfl-radius);
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--rfl-text);
}

.rfl-profile .rfl-profile-bio p {
    margin: 0;
}

.rfl-profile .rfl-profile-stats {
    display: flex !important;
    gap: 1px;
    background: var(--rfl-border) !important;
    border: 1px solid var(--rfl-border) !important;
    border-radius: var(--rfl-radius) !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
    box-shadow: var(--rfl-shadow) !important;
}

.rfl-profile .rfl-stat-block {
    flex: 1 !important;
    background: var(--rfl-bg-white) !important;
    padding: 1.1rem !important;
    text-align: center !important;
}

.rfl-profile .rfl-stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rfl-primary);
    line-height: 1.1;
    margin-bottom: 0.2rem;
}

.rfl-profile .rfl-stat-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rfl-text-muted);
    font-weight: 600;
}

.rfl-profile .rfl-profile-section {
    background: var(--rfl-bg-white) !important;
    border: 1px solid var(--rfl-border) !important;
    border-radius: var(--rfl-radius) !important;
    padding: 1.5rem !important;
    box-shadow: var(--rfl-shadow) !important;
}

.rfl-profile .rfl-profile-section-title {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--rfl-text-muted);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rfl-border);
}

.rfl-profile .rfl-profile-topic-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.rfl-profile .rfl-profile-topic-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 1rem;
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid var(--rfl-border) !important;
    font-size: 0.9rem;
}

.rfl-profile .rfl-profile-topic-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.rfl-profile .rfl-profile-topic-item a {
    color: var(--rfl-text);
    text-decoration: none;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rfl-profile .rfl-profile-topic-item a:hover {
    color: var(--rfl-primary);
    text-decoration: none;
}

.rfl-profile .rfl-profile-topic-date {
    font-size: 0.8rem;
    color: var(--rfl-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Profiel bewerken ────────────────────────────────────────────────────── */

.rfl-profile-edit {
    max-width: 620px;
    margin: 0 auto;
    color: var(--rfl-text);
    font-size: 0.95rem;
}

.rfl-profile-edit .rfl-profile-edit-header {
    margin-bottom: 1.5rem;
}

.rfl-profile-edit .rfl-back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--rfl-text-muted);
    text-decoration: none;
}

.rfl-profile-edit .rfl-back-link:hover {
    color: var(--rfl-primary);
}

.rfl-profile-edit .rfl-form-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.rfl-profile-edit .rfl-form-section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--rfl-text-muted);
    margin: 1.75rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rfl-border);
}

.rfl-profile-edit .rfl-input-prefix-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--rfl-border-dark);
    border-radius: var(--rfl-radius-sm);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    background: var(--rfl-bg-white);
}

.rfl-profile-edit .rfl-input-prefix-wrapper:focus-within {
    border-color: var(--rfl-primary);
    box-shadow: 0 0 0 3px rgba(0, 115, 170, .15);
}

.rfl-profile-edit .rfl-input-prefix {
    padding: 0.6rem 0.7rem;
    background: var(--rfl-bg);
    border-right: 1px solid var(--rfl-border-dark);
    font-size: 0.95rem;
    color: var(--rfl-text-muted);
    line-height: 1.5;
    user-select: none;
    flex-shrink: 0;
}

.rfl-profile-edit .rfl-input-with-prefix {
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    background: transparent;
    font-size: 0.95rem;
    color: var(--rfl-text);
    outline: none;
}

.rfl-profile-edit .rfl-field-hint {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--rfl-text-muted);
}

/* ── Auth (login / register) ─────────────────────────────────────────────── */

.rfl-auth-wrapper {
    max-width: 440px;
    margin: 0 auto !important;
    background: var(--rfl-bg-white) !important;
    border: 1px solid var(--rfl-border) !important;
    border-radius: var(--rfl-radius) !important;
    padding: 2rem 2.25rem !important;
    box-shadow: var(--rfl-shadow-md) !important;
    color: var(--rfl-text);
    font-size: 0.95rem;
}

.rfl-auth-wrapper .rfl-auth-title {
    margin: 0 0 1.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}

.rfl-auth-wrapper .rfl-button-full {
    width: 100%;
    justify-content: center;
}

.rfl-auth-wrapper .rfl-remember-field .rfl-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: normal;
    cursor: pointer;
}

.rfl-auth-wrapper .rfl-remember-field input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.rfl-auth-wrapper .rfl-auth-links {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--rfl-text-muted);
}

.rfl-auth-wrapper .rfl-auth-links a {
    color: var(--rfl-primary);
    text-decoration: none;
}

.rfl-auth-wrapper .rfl-auth-links a:hover {
    text-decoration: underline;
}

.rfl-auth-wrapper .rfl-auth-sep {
    margin: 0 0.4rem;
    color: var(--rfl-text-light);
}

.rfl-auth-wrapper .rfl-field-hint {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--rfl-text-muted);
}

/* ── Responsive profiel ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .rfl-profile .rfl-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.25rem;
    }

    .rfl-profile .rfl-profile-social {
        justify-content: center;
    }

    .rfl-auth-wrapper {
        padding: 1.5rem 1.25rem;
    }
}

/* ── Moderatie ───────────────────────────────────────────────────────────── */

.rfl-mod-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #fff8f0;
    border: 1px solid #f0d0a0;
    border-radius: var(--rfl-radius-sm);
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.rfl-mod-label {
    font-weight: 600;
    color: #92400e;
    flex-shrink: 0;
}

.rfl-mod-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: var(--rfl-radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    border: 1px solid transparent;
}

.rfl-mod-btn-close {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.rfl-mod-btn-close:hover {
    background: #dbeafe;
    color: #1e40af;
    text-decoration: none;
}

.rfl-mod-btn-delete {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.rfl-mod-btn-delete:hover {
    background: #fee2e2;
    color: #b91c1c;
    text-decoration: none;
}

.rfl-mod-btn-neutral {
    background: var(--rfl-bg);
    color: var(--rfl-text-muted);
    border-color: var(--rfl-border);
}

.rfl-mod-btn-neutral:hover {
    background: var(--rfl-border);
    color: var(--rfl-text);
    text-decoration: none;
}

.rfl-reply-mod {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--rfl-border);
    display: flex;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIVÉ FORUM – Toegangspoort
   ═══════════════════════════════════════════════════════════════════════════ */

.rfl-forum-private-gate {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--rfl-bg-white);
    border: 1px solid var(--rfl-border);
    border-radius: var(--rfl-radius);
    box-shadow: var(--rfl-shadow);
    max-width: 480px;
    margin: 2rem auto;
}

.rfl-private-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.rfl-private-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--rfl-text);
}

.rfl-private-desc {
    color: var(--rfl-text-muted);
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

.rfl-private-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Privé-badge in de forum-index */
.rfl-index-cat-name .rfl-badge-private {
    font-size: 0.7rem;
    background: #f0f0f1;
    color: var(--rfl-text-muted);
    border-radius: 3px;
    padding: 0.1em 0.4em;
    vertical-align: middle;
    margin-left: 0.35em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATEGORIE BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.rfl-cat-banner {
    margin-top: 0.75rem;
    padding: 0.75rem 0;
}

.rfl-cat-banner img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rfl-radius);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY TOGGLE (admin-only link in topiclijst)
   ═══════════════════════════════════════════════════════════════════════════ */

.rfl-mod-sticky {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    margin-left: 0.4em;
    font-size: 0.8em;
    opacity: 0.5;
    text-decoration: none;
    vertical-align: middle;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.rfl-mod-sticky .rfl-mod-label {
    font-weight: normal;
    color: inherit;
}

.rfl-mod-sticky:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH — Wachtwoord vergeten / Reset
   ═══════════════════════════════════════════════════════════════════════════ */

.rfl-lostpassword-wrapper,
.rfl-resetpass-wrapper {
    max-width: 420px;
    margin: 2rem auto;
}

.rfl-auth-intro {
    color: var(--rfl-text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.rfl-notice-success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    border-radius: var(--rfl-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

/* Inline formulier-knop die eruitziet als een link (voor resend verificatie) */
.rfl-link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--rfl-accent, #2563eb);
    cursor: pointer;
    font-size: inherit;
    text-decoration: underline;
    font-family: inherit;
}

.rfl-link-btn:hover {
    opacity: 0.8;
}