/* ==========================================================
   NIGHTFALL APOCALYPSE — Custom MyBB Theme
   TWD x Dying Light 2 Crossover RP Forum
   ========================================================== */

/* ---------- Google Font Import ---------- */
@import url(https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap);

/* ---------- 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;
}

/* ---------- Ü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 {
    border: 1px solid var(--na-border);
    border-radius: 4px;
    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, 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: Bullet-Points entfernen & schön ausrichten */
#header ul, .navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

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

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

/* Einheitliche Breite für alle Foren-Tabellen und Info-Boxen */
.tborder,
table.tborder,
#stats_table,
.tborder table {
    width: 100% !important;
    box-sizing: border-box;
}

/* Container, der alles umschließt, auf feste maximale Breite setzen */
#container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Rahmen um Foren-Tabellen und Statistik-Boxen */
.tborder,
table.tborder,
#stats_table {
    border: 2px solid var(--na-accent-red) !important;
    border-radius: 6px;
    overflow: hidden;
}


/* ==========================================================
   === WIR: NEUES CUSTOM ICON-MENÜ (Zentriert & Optimiert) ===
   ========================================================== */

/* Zentriert das komplette Menü im Header */
.custom-icon-menu {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 45px; /* Abstand zwischen den einzelnen Blöcken */
    padding: 15px 0;
    width: 100%;
}

/* Stapelt das Icon über die Foren-Schrift */
.custom-icon-menu .menu-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Macht die Icons schön groß und gibt ihnen das Theme-Rot */
.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;
}

/* Blendet theme-eigene Reste wie Standard-Listenpunkte aus */
.custom-icon-menu .menu-item li {
    display: inline !important;
    list-style: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Formatierung für alle Links innerhalb des neuen Menüs */
.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;
}

/* Hover-Effekt: Text wird hell, Icon bekommt Fokus */
.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;
}

/* INTELLIGENTER PM-ALERT: Wenn neue Nachrichten eintreffen, leuchtet der Brief giftrot */
.custom-icon-menu .item-pms:has(.pn-alert-status:not(:empty):not(:contains("0"))) i {
    color: #ff1a1a !important;
    text-shadow: 0 0 10px rgba(255, 26, 26, 0.8) !important;
}

/* ==========================================
   NIGHTFALL RELATIONS STYLES (Optimiert)
   ========================================== */

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

/* Hover-Effekt: Karte hebt sich leicht ab und leuchtet rot auf */
.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;
}