.log-container {
    margin-top: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.mission-header-panel {
    padding: 25px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0;
}

.header-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; }
.header-info-main { display: flex; flex-direction: column; gap: 5px; }
.server-name { margin: 0; font-size: 1.6rem; line-height: 1.2; color: var(--text-main); }

.header-top-metadata { display: flex; gap: 20px; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; }
.meta-entry { display: flex; align-items: center; gap: 8px; }
.meta-entry i { color: var(--text-dark); font-size: 0.8rem; }
#mission-duration-display { color: var(--accent); }

.header-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    border-top: 1px solid var(--border-dark);
    padding-top: 15px;
}

.info-group label { display: block; font-size: 0.65rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; margin-bottom: 4px; }
.info-group span { font-size: 0.9rem; font-weight: bold; color: var(--text-main); }
.difficulty-text { color: #ff4444 !important; }
.seed-text { font-family: monospace; color: var(--text-muted) !important; }

/* =========================================
   1. MAIN STATS TABLE (.stats-table)
   ========================================= */
.stats-table th {
    background-color: var(--border-dark);
    font-size: 0.65rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}
.stats-table th:hover { background-color: var(--row-hover); }
.stats-table th.asc::after { content: ' \25B2'; font-size: 0.6rem; opacity: 0.7; }
.stats-table th.desc::after { content: ' \25BC'; font-size: 0.6rem; opacity: 0.7; }
.stats-table td { padding: 6px 10px; height: 32px; font-size: 0.8rem; }

/* STATS TABLE COLUMN MANAGEMENT */
/* Manage widths & alignments individually here */

/* Default for all columns */
.stats-table th, .stats-table td { text-align: center; }

/* Col 1: Player */
.stats-table th:nth-child(1), .stats-table td:nth-child(1) { width: 140px; text-align: left; }
/* Col 2: Class */
.stats-table th:nth-child(2), .stats-table td:nth-child(2) { width: 60px; }
/* Col 3: Kills */
.stats-table th:nth-child(3), .stats-table td:nth-child(3) { width: auto; }
/* Col 4: Assists */
.stats-table th:nth-child(4), .stats-table td:nth-child(4) { width: auto; }
/* Col 5: Deaths */
.stats-table th:nth-child(5), .stats-table td:nth-child(5) { width: auto; }
/* Col 6: Damage Dealt */
.stats-table th:nth-child(6), .stats-table td:nth-child(6) { width: auto; padding-left: 4px; padding-right: 4px; }
/* Col 7: Damage Taken */
.stats-table th:nth-child(7), .stats-table td:nth-child(7) { width: auto; }
/* Col 8: Friendly Fire */
.stats-table th:nth-child(8), .stats-table td:nth-child(8) { width: auto; }
/* Col 9: Received Friendly Fire */
.stats-table th:nth-child(9), .stats-table td:nth-child(9) { width: auto; }
/* Col 10: Player Revives */
.stats-table th:nth-child(10), .stats-table td:nth-child(10) { width: auto; }
/* Col 11: Mined */
.stats-table th:nth-child(11), .stats-table td:nth-child(11) { width: auto; padding-left: 4px; padding-right: 4px; }
/* Col 12: SK */
.stats-table th:nth-child(12), .stats-table td:nth-child(12) { width: auto; }
/* Col 13: HVT */
.stats-table th:nth-child(13), .stats-table td:nth-child(13) { width: auto; }
/* Col 14: Resupplies Taken */
.stats-table th:nth-child(14), .stats-table td:nth-child(14) { width: auto; }
/* Add nth-child(7), nth-child(8) etc. here if you need to hardcode other column widths */


/* Detailed Rows (Dropdown) Styles */
.stats-table .detail-row td { padding: 0; border-bottom: none; }
.detailed-stats-wrapper { overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out; background-color: var(--section-bg); }
.detailed-stats-layout { display: flex; padding: 20px; gap: 30px; }
.detailed-left { flex: 0 0 45%; }
.detailed-right { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; ; border-radius: 4px; background-color: var(--card-bg); min-height: 250px; min-width: 300px; padding: 10px; }


/* =========================================
   2. ENEMY TABLE (.enemy-table)
   ========================================= */
/* ENEMY TABLE COLUMN MANAGEMENT */

/* Default for all columns (The Player Columns) */
.enemy-table th, .enemy-table td { text-align: center; }

/* Col 1: Enemy Type */
.enemy-table th:first-child, .enemy-table td:first-child { width: 220px; text-align: left; }

/* Last Col: Total */
.enemy-table th:last-child, .enemy-table td:last-child { width: 80px; font-weight: bold; }


/* =========================================
   3. CAUSE TABLE (.cause-table)
   ========================================= */
.cause-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cause-table th {
    background: var(--panel-bg);
    color: var(--text-muted);
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
    padding: 8px 15px;
    border-bottom: 1px solid var(--border-dark);
}
.cause-table td {
    color: var(--text-main);
    padding: 8px 15px;
    border-bottom: 1px solid var(--border-dark);
}

.cause-table th:hover { background-color: var(--row-hover); color: var(--text-main); }
.cause-table th.asc::after { content: ' \25B2'; font-size: 0.6rem; opacity: 0.7; }
.cause-table th.desc::after { content: ' \25BC'; font-size: 0.6rem; opacity: 0.7; }

/* CAUSE TABLE COLUMN MANAGEMENT */

/* Default for all columns */
.cause-table th, .cause-table td { text-align: left; }

/* Col 1: Cause Name */
.cause-table th:nth-child(1), .cause-table td:nth-child(1) { width: auto; padding-left: 0.4rem; }

/* Col 2: Damage (also targets .num-col) */
.cause-table th:nth-child(2), .cause-table td:nth-child(2),
.cause-table th.num-col, .cause-table td.num-col {
    width: 90px;
    text-align: center;
}

/* Col 3: Kills */
.cause-table th:nth-child(3), .cause-table td:nth-child(3) {
    width: 90px;
    text-align: center;
}


/* =========================================
   ELEMENT LEVEL STYLING (Text, links, etc)
   ========================================= */
.player-name { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.player-name a { color: var(--link-color); text-decoration: none; font-weight: bold; font-size: 0.9rem; display: flex; align-items: center; }
.player-name a:hover .toggle-detail-icon { transform: scale(1.2); }
.toggle-detail-icon { font-size: 0.65rem; margin-right: 8px; transition: transform 0.2s ease; color: var(--text-muted); }
.class-icon { width: 24px; height: 24px; vertical-align: middle; filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.5)); transition: transform 0.1s ease; }
.class-icon:hover { transform: scale(1.2); }
.stats-val { font-family: 'Arial', monospace; font-size: 12px; }
.hvt-highlight { color: var(--accent); font-weight: bold; }
.detailed-title { margin: 0 0 10px 0; color: var(--accent); font-size: 0.85rem; text-transform: uppercase; }
.missing-stats-msg { color: var(--text-muted); font-size: 0.8rem; font-style: italic; margin: 0; }

.radar-chart-container {
    position: relative;
    width: 100%;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Offset to leave space for the absolute title */
}

.graph-placeholder {
    color: var(--text-muted);
    text-align: center;
    font-size: 0.85rem;
}

.placeholder-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* =========================================
   OTHER SECTIONS
   ========================================= */
.section-divider { margin: 40px 0 15px 0; }
.section-divider h2 { font-size: 1.2rem; color: var(--accent); margin: 0; display: flex; align-items: center;}

.graph-container {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 30px;
    height: auto;
    min-height: 300px;
    position: relative;
}

.collapsible-header {
    cursor: pointer; justify-content: space-between; user-select: none; transition: background 0.2s; padding: 10px; margin-bottom: 0 !important; border-radius: 4px;
}
.collapsible-header:hover { background: var(--section-bg); }
.toggle-icon { font-size: 0.8rem; color: var(--text-muted); transition: transform 0.3s ease; margin-left: 10px; }

.collapsible-content { max-height: 2000px; overflow: hidden; transition: max-height 0.3s ease-out, opacity 0.2s; opacity: 1; }
.collapsible-section.collapsed .collapsible-content { max-height: 0; opacity: 0; }
.collapsible-section.collapsed .toggle-icon { transform: rotate(-90deg); }
.collapsible-section.collapsed .collapsible-header { border-bottom: 1px solid var(--border-color); margin-bottom: 20px !important; }