/* ============================================================
   Reunited Roleplay – additions.css
   Modern enhancements + dark editor fix
   Add this as a NEW stylesheet in ACP → Themes → Stylesheets
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   1. EDITOR — dark container + light toolbar icons
   ══════════════════════════════════════════════════════════════ */

/* Outer container */
.sceditor-container {
    background: #1e2126 !important;
    border: 1px solid #2e333b !important;
    border-radius: 0 0 4px 4px !important;
}

/* Toolbar strip */
.sceditor-toolbar {
    background: #1a1d23 !important;
    border-bottom: 1px solid #2e333b !important;
    padding: 5px 6px !important;
    border-radius: 4px 4px 0 0 !important;
}

/* Toolbar button groups */
.sceditor-group {
    border-right: 1px solid #2e333b !important;
    margin-right: 4px !important;
    padding-right: 4px !important;
}

.sceditor-group:last-child {
    border-right: none !important;
}

/* Individual toolbar buttons */
.sceditor-toolbar a.sceditor-button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    margin: 1px !important;
    padding: 3px !important;
    transition: background .12s ease, border-color .12s ease !important;
}

.sceditor-toolbar a.sceditor-button:hover,
.sceditor-toolbar a.sceditor-button.active {
    background: rgba(255, 174, 0, 0.1) !important;
    border-color: rgba(255, 174, 0, 0.3) !important;
}

/* Make toolbar icons light (they're dark PNGs/divs — invert them) */
.sceditor-toolbar a.sceditor-button div,
.sceditor-toolbar a.sceditor-button div.sceditor-button-icon {
    filter: brightness(0) invert(0.65) !important;
    transition: filter .12s ease !important;
}

.sceditor-toolbar a.sceditor-button:hover div,
.sceditor-toolbar a.sceditor-button.active div {
    /* Gold tint on hover */
    filter: brightness(0) saturate(100%) invert(75%) sepia(80%) saturate(800%) hue-rotate(2deg) brightness(105%) !important;
}

/* monocons icon font (used by newer MyBB sceditor) */
.sceditor-toolbar .sceditor-button-icon::before {
    color: #9aa0a9 !important;
}

.sceditor-toolbar a.sceditor-button:hover .sceditor-button-icon::before {
    color: #ffae00 !important;
}

/* Resize handle */
.sceditor-resize {
    background: #252930 !important;
    border-top: 1px solid #2e333b !important;
}

/* Source mode textarea */
.sceditor-container textarea {
    background: #141618 !important;
    color: #e8eaed !important;
    border: none !important;
    caret-color: #ffae00;
}

/* ══════════════════════════════════════════════════════════════
   2. FORUM ROWS — modern card style with hover glow
   ══════════════════════════════════════════════════════════════ */

/* Forum list rows: more padding, smooth hover */
.tborder tr.inline_row td,
tr.inline_row td {
    transition: background .12s ease;
}

tr.inline_row:hover td.trow1,
tr.inline_row:hover td.trow2 {
    background: #252930 !important;
}

/* Forum row — give the status icon a coloured pill */
td.trow1 .forum_status,
td.trow2 .forum_status {
    padding: 0;
    margin-right: 4px;
}

td.trow1 .forum_status i,
td.trow2 .forum_status i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 174, 0, 0.12);
    color: #ffae00;
    font-size: 16px;
    line-height: 1;
}

td.trow1 .forum_status.forum_off i,
td.trow2 .forum_status.forum_off i {
    background: rgba(255, 255, 255, 0.04);
    color: #4a5060;
}

/* Forum name link */
td.trow1 > a,
td.trow2 > a {
    font-weight: 500;
    color: #e8eaed !important;
    font-size: 14px;
}

td.trow1 > a:hover,
td.trow2 > a:hover {
    color: #ffae00 !important;
}

/* Stats columns (threads/posts) — mono numbers */
td.trow1[align="center"],
td.trow2[align="center"] {
    font-size: 13px;
    color: #9aa0a9;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Last post column */
td.trow1[align="right"] span.smalltext,
td.trow2[align="right"] span.smalltext {
    color: #9aa0a9;
    font-size: 12px;
    line-height: 1.5;
}

td.trow1[align="right"] a,
td.trow2[align="right"] a {
    color: #c8cace !important;
    font-weight: 500;
}

td.trow1[align="right"] a:hover,
td.trow2[align="right"] a:hover {
    color: #ffae00 !important;
}

/* ══════════════════════════════════════════════════════════════
   3. CATEGORY HEADERS — gold accent bar + stats inline
   ══════════════════════════════════════════════════════════════ */

.tborder thead tr td.thead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-left: 3px solid #ffae00;
    background: #1a1d23;
}

.tborder thead tr td.thead strong {
    font-size: 14px;
    font-weight: 700;
    color: #e8eaed;
    letter-spacing: 0.3px;
}

.tborder thead tr td.thead strong a {
    color: #e8eaed !important;
    font-size: 14px;
}

.tborder thead tr td.thead strong a:hover {
    color: #ffae00 !important;
}

.tborder thead tr td.thead .smalltext.clr_lgh {
    color: #6a7080 !important;
    font-size: 12px;
    margin-top: 2px;
}

/* Collapse button */
.tborder thead tr td.thead .expcolimage {
    margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════
   4. THREAD LIST ROWS — cleaner, more spacious
   ══════════════════════════════════════════════════════════════ */

/* Thread status icon */
.thread_status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 174, 0, 0.1);
    font-size: 12px;
}

.thread_status::after {
    color: #ffae00 !important;
}

[class*="hot"]::after    { color: #e05252 !important; }
[class*="new"]::after    { color: #ffae00 !important; }
[class*="closefolder"]::after { color: #6a7080 !important; }

/* Thread title link */
tr.inline_row td a[href*="showthread"] {
    color: #e8eaed !important;
    font-weight: 500;
    transition: color .12s ease;
}

tr.inline_row td a[href*="showthread"]:hover {
    color: #ffae00 !important;
}

/* Author smalltext */
tr.inline_row td .author.smalltext {
    color: #6a7080;
    font-size: 12px;
    margin-top: 2px;
}

tr.inline_row td .author.smalltext a {
    color: #9aa0a9 !important;
}

tr.inline_row td .author.smalltext a:hover {
    color: #ffae00 !important;
}

/* Unread / bold thread titles */
tr.inline_row .subject_new a {
    color: #ffffff !important;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   5. NAVIGATION BREADCRUMB — pill style
   ══════════════════════════════════════════════════════════════ */

.navigation {
    background: #1e2126 !important;
    border: 1px solid #2e333b !important;
    border-radius: 6px !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.2px;
}

.navigation span { color: #4a5060; margin: 0 4px; }
.navigation a    { color: #9aa0a9 !important; }
.navigation a:hover { color: #ffae00 !important; }

.navigation .active {
    color: #e8eaed !important;
    font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════
   6. PANEL UPPER — tighter, cleaner top bar
   ══════════════════════════════════════════════════════════════ */

#panel .upper {
    height: 54px !important;
    line-height: 54px !important;
    font-size: 13px !important;
}

/* Welcome text */
#panel .upper .float_left > a:first-child {
    font-weight: 600;
    color: #e8eaed !important;
    font-size: 13px;
}

/* Nav links in upper bar */
#panel .upper ul.menu.top_links li a {
    font-size: 13px;
    color: #9aa0a9 !important;
    padding: 0 10px;
    transition: color .12s ease;
}

#panel .upper ul.menu.top_links li a:hover {
    color: #ffae00 !important;
}

/* ══════════════════════════════════════════════════════════════
   7. POST BITS — modern card style
   ══════════════════════════════════════════════════════════════ */

.post {
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    transition: border-color .15s ease;
}

.post:hover {
    border-color: rgba(255, 174, 0, 0.2) !important;
}

.post.classic {
    border-radius: 6px !important;
}

/* Post author sidebar */
.post.classic .post_author {
    background: #1a1d23;
}

/* Username in post */
.post_author .author_information strong a,
.post_author .author_information strong {
    color: #e8eaed !important;
    font-size: 14px;
    font-weight: 600;
}

.post_author .author_information strong a:hover {
    color: #ffae00 !important;
}

/* User title / group */
.post_author .author_information em,
.post_author .author_information span.smalltext {
    color: #6a7080 !important;
    font-style: normal;
    font-size: 12px;
}

/* Post number / date */
.post .post_head {
    border-bottom: 1px solid #2e333b !important;
}

.post .post_head a {
    color: #9aa0a9 !important;
    font-size: 12px;
}

.post .post_head a:hover { color: #ffae00 !important; }

/* Post body text */
.post_body {
    color: #c8cace !important;
    line-height: 1.7 !important;
    font-size: 14px !important;
}

/* Post controls bar */
.post_controls {
    background: #1a1d23 !important;
    border-top: 1px solid #2e333b !important;
}

/* ══════════════════════════════════════════════════════════════
   8. WHO'S ONLINE / SIDEBAR WIDGETS — card style
   ══════════════════════════════════════════════════════════════ */

/* Online member dots in sidebar */
.tborder .onoffnew.onl {
    box-shadow: 0 0 6px rgba(61, 186, 110, 0.6);
}

/* ══════════════════════════════════════════════════════════════
   9. INPUT FOCUS — gold glow
   ══════════════════════════════════════════════════════════════ */

input.textbox:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: #ffae00 !important;
    box-shadow: 0 0 0 3px rgba(255, 174, 0, 0.12) !important;
}

/* Thread subject input */
input[name="subject"] {
    width: 100%;
    font-size: 15px !important;
    font-weight: 500;
    padding: 10px 12px !important;
    background: #252930 !important;
    color: #e8eaed !important;
    border: 1px solid #2e333b !important;
    border-radius: 4px !important;
}

/* ══════════════════════════════════════════════════════════════
   10. QUICK LOGIN MODAL — dark
   ══════════════════════════════════════════════════════════════ */

.modal, .modal.login-modal {
    background: #1e2126 !important;
    border: 1px solid #2e333b !important;
}

/* ══════════════════════════════════════════════════════════════
   11. TCAT COLUMN HEADERS — subtle gold left border
   ══════════════════════════════════════════════════════════════ */

.tcat {
    border-left: 3px solid rgba(255, 174, 0, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   12. TABLE borders — no outer double-border
   ══════════════════════════════════════════════════════════════ */

.tborder {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════════
   13. FOOTER columns gold heading underlines
   ══════════════════════════════════════════════════════════════ */

.ft-head::after,
.ft-col-1 h2::after,
.ft-col-2 h3::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: #ffae00;
    margin-top: 6px;
    border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════
   14. AWAITING ACTIVATION / RED ALERT
   ══════════════════════════════════════════════════════════════ */

.red_alert {
    border-left: 3px solid #e05252 !important;
    border-radius: 4px !important;
    background: rgba(224, 82, 82, 0.12) !important;
    color: #e8eaed !important;
    text-align: left !important;
}

.red_alert a { color: #ffae00 !important; }

/* ══════════════════════════════════════════════════════════════
   SERVER NOTE: to dark the editor content area (iframe white bg)
   SSH into server and edit:
   /home/ubuntu/server/jscripts/sceditor/themes/mybb.css
   Add at the end:
       body { background: #141618 !important; color: #e8eaed !important; }
       a { color: #ffae00; }
       blockquote { border-left: 3px solid #ffae00; background: #1a1d23; color: #c8cace; }
       code { background: #0d1117; color: #c8cace; }
   ══════════════════════════════════════════════════════════════ */