/* --- VAMPIRE EMPIRE: RESTORED & FINAL FIXED --- */

body {
    background-color: #080808;
    color: #eee;
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* 1. Global Link Fix */
a, a:link, a:visited {
    color: #FFD700 !important;
    text-decoration: none;
}
a:hover {
    color: #ff0000 !important;
    text-shadow: 0 0 8px #f00;
}

/* 2. Top Player Stats Bar */
.player_stats {
    display: flex;
    justify-content: space-between;
    background: #1a0101;
    border-bottom: 2px solid #5E0605;
    padding: 10px 20px;
    align-items: center;
}
.stats_column { flex: 1; font-size: 13px; }

/* 3. Stat Bar Styling */
.bar_bg {
    background: #000;
    border: 1px solid #444;
    height: 10px;
    width: 120px;
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 5px;
}
.bar_fill { height: 100%; transition: width 0.5s; }

/* 4. Layout Fix - Desktop */
#left-sidebar {
    width: 200px;
    float: left;
    background: #111;
    border-right: 1px solid #333;
    padding: 10px;
    min-height: 100vh;
}

#main-content {
    margin-left: 220px; 
    padding: 20px;
}

/* 5. TOPNAV BAR - FIXED LOGOUT ALIGNMENT */
.topnav {
    background: #1a1a1a;
    padding: 10px 20px;
    font-size: 13px;
    border-bottom: 1px solid #444;
    display: flex !important; /* Changed to flex to allow right-alignment */
    justify-content: space-between; /* Pushes content to edges */
    align-items: center;
    width: 100%;
    clear: both;
    box-sizing: border-box;
}

.topnav-left, .topnav-right {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Notification Badges */
.mail-badge {
    background: #cc0000;
    color: white;
    border-radius: 10px;
    padding: 1px 5px;
    font-size: 10px;
    position: absolute;
    top: -8px;
    right: -8px;
    font-weight: bold;
    border: 1px solid #fff;
}

/* 6. Game Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    background: #111;
    border: 1px solid #5E0605;
}
.table th { background: #5E0605; color: #FFD700; padding: 10px; text-align: left; }
.table td { padding: 10px; border-bottom: 1px solid #222; }

/* --- MOBILE RESPONSIVE FIXES --- */
@media screen and (max-width: 900px) {
    #left-sidebar {
        position: fixed;
        left: -280px; 
        top: 0;
        width: 260px;
        height: 100%;
        background: #111;
        z-index: 10001;
        transition: 0.3s ease-in-out;
        overflow-y: auto;
        border-right: 2px solid #5E0605;
        float: none !important;
    }

    #left-sidebar.active {
        left: 0;
    }

    #main-content {
        margin-left: 0 !important; 
        padding: 10px;
        width: 100% !important;
        box-sizing: border-box;
        display: block !important;
    }

    /* Fixed the distortion */
    .main-container {
        display: block !important; 
    }

    .topnav {
        flex-direction: column; /* Stacks Species and Logout on phones */
        font-size: 11px;
        padding: 15px 10px;
        text-align: center;
        gap: 10px;
    }

    .bat-toggle {
        display: flex !important; /* Visible on Mobile */
        justify-content: center;
        padding: 12px;
        background: #1a0101;
        color: #ff0000;
        border: 1px solid #5E0605;
        font-weight: bold;
        cursor: pointer;
    }

    /* Fix for Table Overflow (Dossier/Userlist) */
    table, .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Desktop Bat Toggle Hide */
@media screen and (min-width: 901px) {
    .bat-toggle { display: none !important; } /* Hidden on PC */
}
/* Ensure the label fills the whole TD square */
.macro-table label { 
    display: block; 
    padding: 15px; 
    cursor: pointer; 
    color: #fff; 
    font-size: 20px; 
    font-weight: bold; 
    transition: 0.3s;
}

/* When the hidden radio is checked, style the label immediately following it */
.macro-table input[type='radio']:checked + label {
    background: #5E0605;
    color: #f1c40f;
    box-shadow: inset 0 0 15px #000;
    border-radius: 4px;
}

/* Optional: add a slight border change to the TD when selected */
.macro-table td:has(input:checked) {
    border-color: #f1c40f;
}