/* ============================================================
   Reunited Roleplay — PATCH v2  (rr-patch.css)
   Add as a NEW stylesheet, ordered AFTER rr-shell.css (last).
   ============================================================ */

/* ───────────────────────────────────────────────
   1. COVER BANNER (beneath top bar)
   ─────────────────────────────────────────────── */
.rr-banner{
    position:relative;
    height:160px;
    background:#15181e center/cover no-repeat;
    border-bottom:1px solid var(--rr-border);
    display:flex; align-items:flex-end;
    overflow:hidden;
}
.rr-banner::before{
    content:"";
    position:absolute; inset:0;
    /* this is what "lowers the opacity" of the photo */
    background:linear-gradient(to top, rgba(15,17,20,.96) 0%, rgba(15,17,20,.55) 60%, rgba(15,17,20,.35) 100%);
}
.rr-banner-content{
    position:relative; z-index:1;
    padding:20px 26px;
    display:flex; align-items:center; gap:12px;
}
.rr-banner-content h2{
    font-size:22px; font-weight:800; color:#fff; margin:0;
    text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.rr-banner-content .rr-banner-tag{
    font-size:12px; color:var(--rr-muted);
    padding:4px 10px; border-radius:20px;
    background:rgba(0,0,0,.35); border:1px solid var(--rr-border);
}

/* ───────────────────────────────────────────────
   2. HERO — logo image instead of gamepad icon
   ─────────────────────────────────────────────── */
.rr-hero-art i{ display:none; }
.rr-hero-art img{
    height:118px; width:auto; max-width:220px;
    opacity:.97;
    filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));
}

/* ───────────────────────────────────────────────
   3. CONNECTED CATEGORY — one container, forums inside
   ─────────────────────────────────────────────── */
.rr-cat{
    background:var(--rr-surface);
    border:1px solid var(--rr-border);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:22px;
}
.rr-cat-head{
    display:flex; align-items:center; gap:10px;
    padding:14px 20px;
    margin:0;
    background:var(--rr-rail);
    border-bottom:1px solid var(--rr-border);
    border-left:3px solid var(--rr-gold);
}
.rr-cat-desc{ margin-left:auto; }

/* forums become flush rows with internal dividers (no gaps/own borders) */
.rr-cat-body{ display:block !important; padding:0 !important; gap:0 !important; }
.rr-cat-body .rr-forum{
    border:0 !important;
    border-radius:0 !important;
    border-bottom:1px solid var(--rr-border) !important;
    background:transparent !important;
    padding:16px 20px !important;
    transform:none !important;
}
.rr-cat-body .rr-forum:last-child{ border-bottom:0 !important; }
.rr-cat-body .rr-forum:hover{ background:var(--rr-surface-2) !important; }

/* ───────────────────────────────────────────────
   4. QUICK LINKS  (replaces the statistics block)
   ─────────────────────────────────────────────── */
.rr-quicklinks{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:8px;
}
.rr-ql{
    display:flex; align-items:center; gap:14px;
    background:var(--rr-surface);
    border:1px solid var(--rr-border);
    border-radius:14px;
    padding:18px 20px;
    transition:border-color .15s ease, transform .15s ease;
}
.rr-ql:hover{ border-color:rgba(255,174,0,.4); transform:translateY(-2px); }
.rr-ql-ico{
    flex:0 0 auto;
    width:46px; height:46px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:19px; color:#fff;
}
.rr-ql:nth-child(1) .rr-ql-ico{ background:#4f8ef7; }
.rr-ql:nth-child(2) .rr-ql-ico{ background:#5865F2; }   /* discord blurple */
.rr-ql:nth-child(3) .rr-ql-ico{ background:#46c46a; }
.rr-ql-main{ min-width:0; }
.rr-ql-title{ font-size:14px; font-weight:700; color:var(--rr-text); }
.rr-ql-sub{ font-size:12px; color:var(--rr-dim); margin-top:2px; }
.rr-ql-title, .rr-ql-title a{ color:var(--rr-text) !important; }
.rr-ql:hover .rr-ql-title{ color:var(--rr-gold) !important; }

/* ───────────────────────────────────────────────
   5. CONSOLIDATED SORT / DISPLAY-OPTIONS DROPDOWN
   ─────────────────────────────────────────────── */
.rr-sort{ position:relative; display:inline-block; text-align:left; }
.rr-sort-toggle{
    display:inline-flex; align-items:center; gap:8px;
    height:38px; padding:0 16px;
    border-radius:10px;
    background:var(--rr-surface); border:1px solid var(--rr-border);
    color:var(--rr-text); font-size:13px; font-weight:600;
    cursor:pointer;
}
.rr-sort-toggle:hover{ border-color:var(--rr-gold); color:var(--rr-gold); }
.rr-sort-toggle i{ font-size:11px; }
.rr-sort-menu{
    display:none;
    position:absolute; right:0; bottom:calc(100% + 8px);
    width:240px;
    background:var(--rr-surface);
    border:1px solid var(--rr-border);
    border-radius:12px;
    padding:16px;
    box-shadow:0 12px 32px rgba(0,0,0,.5);
    z-index:60;
}
.rr-sort.open .rr-sort-menu{ display:block; }

/* let the pop-up escape the table's overflow:hidden clipping */
.rr-threadtable{ overflow:visible !important; }
.rr-threadtable .tfoot{ overflow:visible !important; position:relative; }

/* ───────────────────────────────────────────────
   8. USER MENU DROPDOWN (topbar chip)
   ─────────────────────────────────────────────── */
.rr-usermenu{ position:relative; }
.rr-usermenu .rr-user-chip{
    background:var(--rr-surface) !important;
    border:1px solid var(--rr-border) !important;
    border-radius:10px !important;
    height:auto !important;
    font-family:inherit !important;
    font-weight:600 !important;
    color:var(--rr-text) !important;
    cursor:pointer;
}
.rr-usermenu .rr-user-chip:hover{ border-color:var(--rr-gold) !important; background:var(--rr-surface) !important; }
.rr-usermenu.open .rr-user-chip i.fa-caret-down{ transform:rotate(180deg); }
.rr-usermenu .rr-user-chip i.fa-caret-down{ transition:transform .15s ease; }

.rr-usermenu-drop{
    display:none;
    position:absolute; right:0; top:calc(100% + 8px);
    min-width:212px;
    background:var(--rr-surface);
    border:1px solid var(--rr-border);
    border-radius:12px;
    padding:6px;
    box-shadow:0 14px 36px rgba(0,0,0,.55);
    z-index:60;
}
.rr-usermenu.open .rr-usermenu-drop{ display:block; }
.rr-usermenu-item{
    display:flex; align-items:center; gap:11px;
    padding:9px 12px;
    border-radius:8px;
    color:var(--rr-text) !important;
    font-size:13px; font-weight:500;
    transition:background .12s ease, color .12s ease;
}
.rr-usermenu-item i{ width:16px; text-align:center; color:var(--rr-muted); font-size:14px; transition:color .12s ease; }
.rr-usermenu-item:hover{ background:var(--rr-bg); color:var(--rr-gold) !important; }
.rr-usermenu-item:hover i{ color:var(--rr-gold); }
.rr-usermenu-sep{ height:1px; background:var(--rr-border); margin:6px 4px; }
.rr-usermenu-logout:hover{ color:#e05252 !important; }
.rr-usermenu-logout:hover i{ color:#e05252; }
.rr-sort-menu label{
    display:block;
    font-size:11px; text-transform:uppercase; letter-spacing:.4px;
    color:var(--rr-dim); margin:0 0 5px;
}
.rr-sort-menu .rr-sort-field{ margin-bottom:12px; }
.rr-sort-menu select{ width:100%; height:38px; }
.rr-sort-menu input.button{ width:100%; margin-top:4px; }

/* ───────────────────────────────────────────────
   6. MODERN POSTBIT  (force dark + clean)
   ─────────────────────────────────────────────── */
.post,
.post.classic{
    background:var(--rr-surface) !important;
    border:1px solid var(--rr-border) !important;
    border-radius:14px !important;
    overflow:hidden;
    margin-bottom:14px !important;
}
.post:hover{ border-color:rgba(255,174,0,.22) !important; }

/* author strip (horizontal postbit) */
.post .post_author{
    background:transparent !important;
    border:0 !important;
    border-bottom:1px solid var(--rr-border) !important;
    padding:16px 20px !important;
    display:flex !important; align-items:center !important; gap:14px;
}
.post .trow1, .post .trow2{ background:transparent !important; }

/* avatar */
.post .post_author div.author_avatar{ float:none !important; margin:0 !important; min-width:0 !important; }
.post .post_author div.author_avatar img{
    width:52px !important; height:52px !important;
    border-radius:12px !important;
    border:1px solid var(--rr-border) !important;
    background:transparent !important;
}

/* name + usergroup */
.post .post_author div.author_information{ float:none !important; padding:0 !important; }
.post .author_information strong a,
.post .author_information strong{
    color:#fff !important; font-size:15px !important; font-weight:700 !important;
}
.post .author_information strong a:hover{ color:var(--rr-gold) !important; }

/* stats pill (joined / posts / reputation) */
.post .post_author div.author_statistics,
.post .post_author div.author_statistics_default{
    margin-left:auto !important;
    background:var(--rr-bg) !important;
    border:1px solid var(--rr-border) !important;
    border-radius:10px !important;
    padding:10px 16px !important;
    color:var(--rr-muted) !important;
    font-size:12px !important;
}

/* head (post #, date) */
.post .post_head{
    border-bottom:1px solid var(--rr-border) !important;
    padding:14px 20px 12px !important; margin:0 !important;
}
.post .post_head a, .post .post_head span{ color:var(--rr-muted) !important; }

/* body */
.post_content{ padding:18px 20px !important; }
.post_body{ color:#c8cace !important; font-size:14px !important; line-height:1.7 !important; }

/* controls bar */
.post_controls{
    background:var(--rr-rail) !important;
    border-top:1px solid var(--rr-border) !important;
    padding:12px 20px !important;
}
.postbit_buttons > a:link,
.postbit_buttons > a:visited{
    border:1px solid var(--rr-border) !important;
    border-radius:8px !important;
    color:var(--rr-muted) !important;
    background:var(--rr-surface) !important;
}
.postbit_buttons > a:hover{
    background:var(--rr-gold) !important; color:#141618 !important; border-color:var(--rr-gold) !important;
}

/* online dot bottom-left of post */
.post .online, .post .away{ color:#46c46a !important; }

/* ───────────────────────────────────────────────
   7. THREAD-LIST TABLE on dark (forumdisplay)
   ─────────────────────────────────────────────── */
.tborder{ background:var(--rr-surface) !important; border-color:var(--rr-border) !important; }
.thead{ background:var(--rr-rail) !important; color:var(--rr-text) !important; }
.tcat{ background:var(--rr-surface-2) !important; border-color:var(--rr-border) !important; color:var(--rr-muted) !important; }
.trow1{ background:var(--rr-surface) !important; }
.trow2{ background:#191d23 !important; }
.trow1, .trow2{ border-color:var(--rr-border) !important; }
.tfoot{ background:var(--rr-rail) !important; border-color:var(--rr-border) !important; }