/* static/style.css */

/* Google Fonts - Inter & Roboto Mono */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Roboto+Mono:wght@400;700&display=swap');

/* Base Styles - Deeper Black & Blue Theme */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #0d0d12; /* Even deeper black */
    color: #e0e0e0; /* Light text */
    line-height: 1.6;
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #14141c; /* Deep charcoal for container */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); /* More pronounced shadow for depth */
    border: 1px solid #202028; /* Subtle container border */
}

/* Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 2px solid #2a2a35; /* Darker, subtle separator */
}

.dashboard-header h1 {
    margin: 0;
    color: #007bff; /* Vibrant blue accent for main title */
    font-weight: 700;
    font-size: 2.2em;
    text-shadow: 0 0 10px rgba(0, 123, 255, 0.4); /* Soft glow */
}

.logout-button {
    background-color: #dc3545; /* Consistent red for logout */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.logout-button:hover {
    background-color: #c82333;
    transform: translateY(-2px);
}

/* Section Titles */
h2 {
    color: #0099ff; /* Brighter blue for section titles */
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1.8em;
    border-left: 5px solid #007bff; /* Matching blue accent bar */
    padding-left: 15px;
}

/* Info Cards */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.info-card {
    background-color: #1a1a2e; /* Darker blue-black for cards */
    border: 1px solid #2a2a35;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
}

.info-card h2 {
    color: #0099ff; /* Match general h2 */
    font-size: 1.5em;
    border-left: none;
    padding-left: 0;
    margin-bottom: 15px;
}

.info-card p {
    margin-bottom: 10px;
    font-size: 1.15em;
    color: #c0c0c0;
}

.info-card strong {
    color: #f0f0f0;
}

/* Status colors */
.status-running {
    color: #4CAF50; /* Green */
    font-weight: 700;
}
.status-offline {
    color: #f44336; /* Red */
    font-weight: 700;
}

/* Activity Logs Section */
.logs-section {
    background-color: #1a1a2e; /* Same as info cards for consistency */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid #2a2a35;
}

.logs-section h2 {
    color: #007bff; /* Main accent for log title */
    margin-bottom: 20px;
}

/* Log Filter Buttons */
.log-filters {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 10px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2a2a35;
}

.log-filter-button {
    background-color: #2a2a35; /* Dark background for buttons */
    color: #0099ff; /* Blue text */
    border: 1px solid #0056b3; /* Blue border */
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    white-space: nowrap; /* Prevent text wrapping */
}

.log-filter-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    color: white;
    transform: translateY(-2px);
}

.log-filter-button.active {
    background-color: #007bff; /* Active button is vibrant blue */
    color: white;
    border-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); /* Glow for active */
}

.log-filter-button.active:hover {
    background-color: #0069d9;
}


.log-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 15px;
    padding-top: 15px;
}

/* Scrollbar styling */
.log-list::-webkit-scrollbar {
    width: 10px;
}
.log-list::-webkit-scrollbar-track {
    background: #1a1a2e;
    border-radius: 10px;
}
.log-list::-webkit-scrollbar-thumb {
    background: #007bff; /* Vibrant blue thumb */
    border-radius: 10px;
}
.log-list::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}


.log-entry {
    background-color: #11111a; /* Even darker for individual entries */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    border-left: 5px solid transparent;
}

.log-entry.hidden {
    display: none; /* Class to hide log entries */
}

.log-entry:hover {
    background-color: #1a1a2e; /* Slightly lighter on hover */
}

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
}

.log-type {
    font-weight: 700;
    color: #0099ff; /* Brighter blue for log type */
    text-transform: uppercase;
    flex-grow: 1;
}

/* Specific log type colors and borders (more blue-focused) */
.log-entry.ban_audit_log .log-type,
.log-entry.ban_command .log-type,
.log-entry.temp_ban_command .log-type {
    color: #ff4d4d; /* Brighter red for bans */
}
.log-entry.ban_audit_log,
.log-entry.ban_command,
.log-entry.temp_ban_command { border-left-color: #ff4d4d; }

.log-entry.kick .log-type,
.log-entry.kick_command .log-type {
    color: #ffaa00; /* Amber for kicks */
}
.log-entry.kick,
.log-entry.kick_command { border-left-color: #ffaa00; }

.log-entry.member_leave .log-type {
    color: #8899a6; /* Muted gray-blue for leaves */
}
.log-entry.member_leave { border-left-color: #8899a6; }

.log-entry.mute_command .log-type {
    color: #ffcc00; /* Gold for mutes */
}
.log-entry.mute_command { border-left-color: #ffcc00; }

.log-entry.unmute_command .log-type,
.log-entry.unban_automated .log-type,
.log-entry.unmute_automated .log-type {
    color: #66ff99; /* Soft green for unmutes/unbans */
}
.log-entry.unmute_command,
.log-entry.unban_automated,
.log-entry.unmute_automated { border-left-color: #66ff99; }

.log-entry.message_delete .log-type {
    color: #e66c00; /* Darker orange for deletes */
}
.log-entry.message_delete { border-left-color: #e66c00; }

.log-entry.message_edit .log-type {
    color: #00bcd4; /* Aqua for edits */
}
.log-entry.message_edit { border-left-color: #00bcd4; }

.log-entry.member_join .log-type {
    color: #76ff03; /* Bright green for joins */
}
.log-entry.member_join { border-left-color: #76ff03; }

.log-entry.auto_role_assigned .log-type {
    color: #00e676; /* Green for auto-roles */
}
.log-entry.auto_role_assigned { border-left-color: #00e676; }

.log-entry.channel_update .log-type {
    color: #00aaff; /* Light blue for channel updates */
}
.log-entry.channel_update { border-left-color: #00aaff; }

.log-entry.channel_create .log-type {
    color: #00e676; /* Green for channel creates */
}
.log-entry.channel_create { border-left-color: #00e676; }

.log-entry.channel_delete .log-type {
    color: #ff3366; /* Pinkish-red for channel deletes */
}
.log-entry.channel_delete { border-left-color: #ff3366; }

.log-entry.member_role_update .log-type {
    color: #a766ff; /* Soft purple for role updates */
}
.log-entry.member_role_update { border-left-color: #a766ff; }

.log-entry.member_nickname_update .log-type {
    color: #53d3d3; /* Teal for nickname updates */
}
.log-entry.member_nickname_update { border-left-color: #53d3d3; }

.log-entry.voice_join .log-type,
.log-entry.voice_leave .log-type,
.log-entry.voice_move .log-type,
.log-entry.voice_self_mute .log-type,
.log-entry.voice_self_deafen .log-type,
.log-entry.voice_server_mute .log-type,
.log-entry.voice_server_deafen .log-type,
.log-entry.voice_streaming .log-type,
.log-entry.voice_video .log-type {
    color: #00acee; /* Consistent blue for voice logs */
}
.log-entry.voice_join,
.log-entry.voice_leave,
.log-entry.voice_move,
.log-entry.voice_self_mute,
.log-entry.voice_self_deafen,
.log-entry.voice_server_mute,
.log-entry.voice_server_deafen,
.log-entry.voice_streaming,
.log-entry.voice_video { border-left-color: #00acee; }

.log-entry.reaction_role_added .log-type,
.log-entry.reaction_role_removed .log-type {
    color: #cc66ff; /* Pink-purple for reaction roles */
}
.log-entry.reaction_role_added,
.log-entry.reaction_role_removed { border-left-color: #cc66ff; }


.log-timestamp {
    font-family: 'Roboto Mono', monospace;
    color: #a0a0b0; /* Slightly bluer gray */
    font-size: 0.9em;
    flex-shrink: 0;
    margin-left: 20px;
}

.log-details {
    padding-left: 10px;
    border-left: 2px solid #2a2a35; /* Darker visual separator for details */
    padding-top: 5px;
}

.log-details p {
    margin: 3px 0;
    font-size: 0.95em;
    color: #c0c0d0; /* Slightly bluer light text */
}

.log-details strong {
    color: #f0f0f5; /* Brighter for strong text */
}

.log-details pre {
    background-color: #0d0d12; /* Match body background for code blocks */
    padding: 8px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.85em;
    color: #f0f0f5;
    border: 1px solid #2a2a35;
}


.no-logs {
    text-align: center;
    color: #a0a0b0;
    padding: 30px;
    font-style: italic;
    font-size: 1.1em;
}