/* ==========================================================
   NIGHTFALL APOCALYPSE — Custom MyBB Theme
   TWD x Dying Light 2 Crossover RP Forum
   (aufgeräumte Version: Duplikate entfernt, Login-Fix eingebaut)
   ========================================================== */

/* ---------- Schriften ----------
   Oswald und Roboto werden NICHT mehr per @import geladen (das blockiert
   das Rendern der ganzen Seite). Stattdessen kommen sie über einen <link>
   im headerinclude-Template. */

/* ---------- Farbvariablen (zur einfachen Anpassung) ---------- */
:root {
    --na-bg-dark: #0d0d0d;
    --na-bg-panel: #161616;
    --na-bg-panel-alt: #1e1e1e;
    --na-border: #3a0a0a;
    --na-accent-red: #8b0000;
    --na-accent-red-bright: #c41e1e;
    --na-accent-green: #5a7d3a;
    --na-text: #d4d0c8;
    --na-text-dim: #8a8580;
    --na-text-bright: #f0ece4;
}

/* ---------- Grundlayout ---------- */
body {
    background-color: var(--na-bg-dark);
    background-image:
        radial-gradient(ellipse at top, #1a1a1a 0%, #0d0d0d 60%);
    color: var(--na-text);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

a {
    color: var(--na-accent-red-bright);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--na-accent-green);
}

#container {
    background-color: transparent;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ---------- Überschriften ---------- */
h1, h2, h3, .thead, .tcat {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ---------- Kopfbereich / Logo ---------- */
#header {
    background: linear-gradient(180deg, #000000 0%, #150505 100%);
    border-bottom: 3px solid var(--na-accent-red);
    padding: 20px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

#header .logo, #panel h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--na-text-bright);
    text-shadow: 0 0 10px rgba(139,0,0,0.8), 0 0 20px rgba(139,0,0,0.4);
    letter-spacing: 2px;
}

/* ---------- Kategorie-Header (.thead) ---------- */
.thead, thead td, tr.thead td {
    background: linear-gradient(90deg, var(--na-accent-red) 0%, #4a0505 100%) !important;
    color: var(--na-text-bright) !important;
    font-weight: 600;
    padding: 8px 12px;
    border-bottom: 2px solid #000;
}

.thead a, tr.thead td a {
    color: var(--na-text-bright) !important;
}

/* ---------- Kategorie-Titel (.tcat) ---------- */
.tcat, tr.tcat td {
    background-color: var(--na-bg-panel-alt) !important;
    color: var(--na-accent-red-bright) !important;
    font-weight: 700;
    border-left: 4px solid var(--na-accent-red);
    padding: 10px 12px;
}

/* ---------- Zeilen (Foren-/Themenlisten) ---------- */
.trow1, tr.trow1 td {
    background-color: var(--na-bg-panel) !important;
    color: var(--na-text);
    border-bottom: 1px solid #222;
}

.trow2, tr.trow2 td {
    background-color: var(--na-bg-panel-alt) !important;
    color: var(--na-text);
    border-bottom: 1px solid #222;
}

.trow1:hover, .trow2:hover,
tr.trow1:hover td, tr.trow2:hover td {
    background-color: #241010 !important;
    transition: background-color 0.2s ease;
}

/* ---------- Tabellen-Rahmen ---------- */
.tborder table {
    width: 100% !important;
    box-sizing: border-box;
}

.tborder,
table.tborder,
#stats_table {
    width: 100% !important;
    box-sizing: border-box;
    border: 2px solid var(--na-accent-red) !important;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* ---------- Buttons ---------- */
.button, input[type="submit"], input[type="button"], .pbutton {
    background: linear-gradient(180deg, var(--na-accent-red-bright) 0%, var(--na-accent-red) 100%);
    color: var(--na-text-bright) !important;
    border: 1px solid #000;
    padding: 6px 16px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button:hover, input[type="submit"]:hover, .pbutton:hover {
    background: linear-gradient(180deg, var(--na-accent-green) 0%, #3f5a28 100%);
    box-shadow: 0 0 8px rgba(90,125,58,0.6);
}

/* ---------- Formulare ---------- */
input[type="text"], input[type="password"], textarea, select {
    background-color: #0a0a0a;
    border: 1px solid var(--na-border);
    color: var(--na-text);
    padding: 6px 8px;
    border-radius: 3px;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    outline: none;
    border-color: var(--na-accent-red-bright);
    box-shadow: 0 0 5px rgba(196,30,30,0.5);
}

/* ---------- Postbereich ---------- */
.post, .postbit {
    background-color: var(--na-bg-panel);
    border: 1px solid #222;
    border-left: 3px solid var(--na-accent-red);
}

.author_information {
    background-color: var(--na-bg-panel-alt);
}

/* ---------- Footer ---------- */
#footer {
    background-color: #000;
    border-top: 2px solid var(--na-accent-red);
    color: var(--na-text-dim);
    padding: 15px 0;
    margin-top: 20px;
    text-align: center;
    font-size: 11px;
}

/* ---------- Scrollbar (Chrome/Edge) ---------- */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: var(--na-accent-red);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--na-accent-red-bright);
}

/* ---------- Wichtige Hinweise / Warnungen (z.B. Regeln-Forum) ---------- */
.na-warning {
    background-color: rgba(139,0,0,0.15);
    border-left: 4px solid var(--na-accent-red);
    padding: 10px 15px;
    margin: 10px 0;
}

/* ---------- Navigation-Listen ---------- */
#header ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

#header ul li {
    list-style: none;
}

/* Suche im Header ausblenden */
#header .upper .wrapper form[action*="search"],
#quick_search {
    display: none !important;
}

/* Breadcrumb-Navigation ausblenden */
.navigation {
    display: none !important;
}


/* ==========================================================
   CUSTOM ICON-MENÜ (zentriert)
   ========================================================== */

.custom-icon-menu {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 45px;
    padding: 15px 0;
    width: 100%;
}

.custom-icon-menu .menu-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.custom-icon-menu .menu-item i,
.custom-icon-menu .pms-link i {
    font-size: 28px !important;
    color: var(--na-accent-red-bright) !important;
    margin-bottom: 8px !important;
    display: block !important;
    transition: color 0.2s ease;
}

.custom-icon-menu .menu-item li {
    display: inline !important;
    list-style: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.custom-icon-menu .menu-item a,
.custom-icon-menu .pms-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    font-size: 13px !important;
    color: var(--na-text-dim) !important;
    text-decoration: none !important;
}

.custom-icon-menu .menu-item a:hover i {
    color: #fff !important;
}
.custom-icon-menu .menu-item a:hover {
    color: var(--na-text-bright) !important;
}

/* Versteckt den MyBB-Zählerwert im Hintergrund */
.pn-alert-status {
    display: none !important;
}


/* ==========================================================
   RELATIONS STYLES
   ========================================================== */

.twd-relation-card {
    display: flex;
    gap: 12px;
    background: #151515;
    border: 1px solid #2a2a2a;
    border-left: 4px solid var(--na-accent-red, #8b0000);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
    color: #ccc;
    transition: all 0.25s ease-in-out;
}

.twd-relation-card:hover {
    background: #1c1c1c;
    border-color: var(--na-accent-red-bright, #c41e1e);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.twd-relation-avatar img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.twd-relation-info {
    flex-grow: 1;
}

.twd-relation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.twd-relation-name {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.twd-relation-badge {
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Dynamische Ränder und Badges je nach Kategorie */
.twd-relation-card.kat-familie, .twd-relation-badge.kat-familie             { border-left-color: #1a3a5f; background: #1a3a5f; color: #fff; }
.twd-relation-card.kat-freunde, .twd-relation-badge.kat-freunde             { border-left-color: #1b5e20; background: #1b5e20; color: #fff; }
.twd-relation-card.kat-beste-freunde, .twd-relation-badge.kat-beste-freunde { border-left-color: #004d40; background: #004d40; color: #fff; }
.twd-relation-card.kat-liebe, .twd-relation-badge.kat-liebe                 { border-left-color: #b71c1c; background: #b71c1c; color: #fff; }
.twd-relation-card.kat-feinde, .twd-relation-badge.kat-feinde               { border-left-color: #8b0000; background: #3e2723; color: #fff; }
.twd-relation-card.kat-bekannte, .twd-relation-badge.kat-bekannte           { border-left-color: #555555; background: #333333; color: #fff; }
.twd-relation-card.kat-vergangenheit, .twd-relation-badge.kat-vergangenheit { border-left-color: #e65100; background: #e65100; color: #fff; }

.twd-relation-status {
    font-size: 0.85em;
    color: #8a8580;
    margin-bottom: 6px;
}

.twd-relation-text {
    font-size: 0.9em;
    color: #ddd;
    line-height: 1.4;
}


/* ==========================================================
   FOREN-STATUS-ICONS
   ========================================================== */

.forum_status.forum_on,
.forum_status.forum_off,
.forum_status.forum_lock {
    width: 32px;
    height: 32px;
    display: inline-block;
}

.forum_status.forum_on   { background: url(../../../images/ungelesen.png) no-repeat center center / 32px 32px; }
.forum_status.forum_off  { background: url(../../../images/gelesen.png) no-repeat center center / 32px 32px; }
.forum_status.forum_lock { background: url(../../../images/gesperrt.png) no-repeat center center / 32px 32px; }

.forum_status.forum_link {
    display: none !important;
}


/* ==========================================================
   FOREN-GRID (2 Spalten) — nur auf dem Index!
   WICHTIG: tbody[id^="cat_"] trifft nur die Kategorien der
   Foren-Übersicht, NICHT Login, Registrierung, UserCP usw.
   ========================================================== */

.forums_list,
.forums_list_container,
.forum_category,
.nightfall-forums-grid,
.tborder > tbody[id^="cat_"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    background: transparent !important;
    border: none !important;
}

/* Einzelne Foren-Kästen */
.nightfall-forum-box {
    background: #141414 !important;
    border: 1px solid #ff0000 !important;
    border-radius: 4px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* Rote Rahmen für Zeilen — nur in den Foren-Kategorien */
.tborder > tbody[id^="cat_"] .trow1,
.tborder > tbody[id^="cat_"] .trow2 {
    border: 1px solid #ff0000 !important;
    background: #141414 !important;
    border-radius: 4px;
    padding: 15px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nightfall-forum-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.nightfall-forum-title a {
    font-size: 18px;
    color: #ff3333;
    text-decoration: none;
    font-weight: bold;
}

.nightfall-forum-title a:hover {
    color: #ff6666;
}

.nightfall-forum-desc {
    color: #cccccc;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.4;
}

.nightfall-forum-footer {
    border-top: 1px solid #330000;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #999999;
}

.nightfall-lastpost-info a {
    color: #ff5555;
}

/* Avatar / Kreis oben rechts */
.avatar-placeholder {
    width: 60px;
    height: 60px;
    border: 2px solid #ff4500;
    border-radius: 50%;
    background: #1a1a1a;
    flex-shrink: 0;
}

/* Kategorie-Block */
.nightfall-category-block {
    margin-bottom: 20px;
}

.nightfall-category-header {
    background: #1a1a1a;
    border: 1px solid #ff0000;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nightfall-category-header a {
    color: #ff3333;
    font-size: 16px;
    text-decoration: none;
}

/* Letzter-Beitrag-Avatar */
.forum-lastpost-avatar img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ff0000;
}

/* Ältere Variante der Foren-Box (falls im Template noch verwendet) */
.forum-box {
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid #4a0000;
    padding: 15px;
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.forum-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-right: 35px;
}

.forum-box-header a {
    color: #ff3333;
    font-size: 16px;
    text-decoration: none;
}

.forum-box-header a:hover {
    color: #ff6666;
}

.forum-box .forum_status {
    position: absolute;
    top: 15px;
    right: 15px;
}

.forum-box-desc {
    color: #cccccc;
    margin-bottom: 12px;
}

.forum-box-stats {
    border-top: 1px solid #330000;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #999999;
}


/* ==========================================================
   BOARD-STATISTIKEN (Index)
   ========================================================== */

.board_stats, #boardstats {
    width: 100% !important;
    clear: both !important;
    box-sizing: border-box;
    margin-top: 20px;
}

.index-sidebar, .stats-container {
    width: 100% !important;
}

#boardstats_e {
    display: block !important;
}

#boardstats_e > tr, #boardstats_e > div {
    width: 100% !important;
    display: block !important;
}


/* ==========================================================
   REGISTRIERUNG / COPPA
   ========================================================== */

.coppa_container, .register_container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================
   LOGIN-POPUP (MyBB-Modal)
   Das Modal wird von einem Overlay (.blocker) umschlossen, das
   den ganzen Bildschirm abdeckt und das Fenster zentriert.
   Diese Grundregeln fehlen in einem eigenen global.css, deshalb
   landete das Fenster sonst unter dem Footer.
   .popup_menu bleibt unangetastet (Dropdown-Menüs).
   ========================================================== */

.blocker {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 999998;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.75);
    text-align: center;
}

.blocker:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.05em;
}

.blocker.behind {
    background-color: transparent;
}

.modal {
    display: none;
    vertical-align: middle;
    position: relative;
    z-index: 999999;
    max-width: 700px;
    width: 90%;
    box-sizing: border-box;
    text-align: left;
    padding: 20px;
    background-color: #0b0b0b !important;
    border: 1px solid var(--na-accent-red) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) !important;
}

/* Modal fest in der Bildschirmmitte verankern — unabhängig davon,
   wie das Overlay sonst layoutet. */
.blocker .modal {
    display: block !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-height: 90vh;
    overflow-y: auto;
}

.modal a.close-modal {
    display: inline-block;
    margin-top: 10px;
}

.modal table.tborder {
    border: none !important;
    border-radius: 0;
}

/* Unterforen nebeneinander */
[class*="subforum"] a,
.smalltext a[href*="forumdisplay.php"] {
	display: inline !important;
	width: auto !important;
	float: none !important;
}

/* Unterforen nebeneinander */
.nightfall-forum-desc .nf-subforums {
	display: block !important;
}
.nightfall-forum-desc .nf-subforums strong {
	display: inline !important;
}
.nightfall-forum-desc .nf-subforums a {
	display: inline !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

#boardstats_e tr:has(> td.tcat),
#boardstats_e tr:has(> td.trow1),
#boardstats_e tr:has(> td.trow2) {
	display: block !important;
	width: 100% !important;
}

#boardstats_e td.tcat,
#boardstats_e td.trow1,
#boardstats_e td.trow2 {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}