:root {
    --bg-color: #f0f2f5;
    --card-bg: white;
    --text-color: #333;
    --input-border: #ddd;
    --primary-color: #1a73e8;
    --secondary-color: #70757a;
    --nav-bg: #fff;
    --table-header: #f8f9fa;
    --sidebar-width: 250px;
}
[data-theme="dark"] {
    --bg-color: #18191a;
    --card-bg: #242526;
    --text-color: #e4e6eb;
    --input-border: #3e4042;
    --primary-color: #4285f4;
    --nav-bg: #242526;
    --table-header: #242526;
}
body { font-family: sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; display: flex; transition: background 0.3s, color 0.3s; min-height: 100vh; }

/* Sidebar Styles */
.sidebar { width: var(--sidebar-width); background: var(--nav-bg); border-right: 1px solid var(--input-border); display: flex; flex-direction: column; position: fixed; height: 100vh; transition: background 0.3s; z-index: 100; }
.sidebar-header { padding: 20px; border-bottom: 1px solid var(--input-border); font-size: 1.2rem; font-weight: bold; color: var(--primary-color); display: flex; align-items: center; gap: 10px; }
.sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
.sidebar-category { padding: 15px 20px 5px 20px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; color: var(--secondary-color); letter-spacing: 1px; display: flex; justify-content: space-between; align-items: center; }
.sidebar-category.collapsible { cursor: pointer; user-select: none; }
.sidebar-category.collapsible:hover { background: rgba(0,0,0,0.03); }
.category-content { overflow: hidden; transition: max-height 0.6s ease-in-out; max-height: 500px; }
.category-content.collapsed { max-height: 0; }
.toggle-icon { font-size: 0.6rem; transition: transform 0.6s; }
.collapsed + .toggle-icon, .sidebar-category.collapsed .toggle-icon { transform: rotate(-90deg); }
.sidebar-item { padding: 12px 20px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: var(--text-color); text-decoration: none; transition: background 0.2s; }
.sidebar-item:hover { background: rgba(0,0,0,0.05); }
.sidebar-item.active { background: var(--primary-color); color: white; }
.sidebar-footer { padding: 10px 0; border-top: 1px solid var(--input-border); }

.main-content { margin-left: var(--sidebar-width); flex: 1; padding: 30px; box-sizing: border-box; }

.card { background: var(--card-bg); padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; transition: background 0.3s; }
h1 { color: var(--primary-color); margin-bottom: 20px; }

/* Dashboard Tiles */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.tile { cursor: pointer; transition: transform 0.2s; }
.tile:hover { transform: translateY(-5px); }
.stat-value { font-size: 28px; font-weight: bold; color: var(--primary-color); margin-bottom: 5px; }
.stat-label { font-size: 14px; opacity: 0.8; }

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { padding: 12px; border-bottom: 1px solid var(--input-border); text-align: left; }
th { background: var(--table-header); }
.btn { padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; font-size: 14px; transition: background 0.2s; }
.btn-primary { background: var(--primary-color); color: white; }
.btn-danger { background: #d93025; color: white; }
.btn-success { background: #1e8e3e; color: white; }
.status-answered { color: #4285f4; font-weight: bold; }
.status-resolved { color: #1e8e3e; font-weight: bold; }
.status-open { color: #d93025; font-weight: bold; }
.status-in_progress { color: #f4b400; font-weight: bold; }
.status-closed { color: #70757a; font-weight: bold; }

.badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
}
.badge-support { background: #1e8e3e; }
.badge-moderation { background: #f4b400; }
.badge-admin { background: #d93025; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 2000; }
.modal-content { background: var(--card-bg); color: var(--text-color); padding: 25px; border-radius: 8px; width: 100%; max-width: 600px; position: relative; max-height: 90vh; overflow-y: auto; }
.modal-close { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; border: 1px solid var(--input-border); border-radius: 4px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-weight: bold; transition: background 0.2s; }
.modal-close:hover { background: var(--input-border); }

#loginOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); display: flex; justify-content: center; align-items: center; z-index: 3000; transition: background 0.3s; }
input, textarea, select { background: var(--card-bg); color: var(--text-color); border: 1px solid var(--input-border); padding: 10px; border-radius: 4px; }
.theme-switch { position: fixed; top: 20px; right: 20px; cursor: pointer; background: var(--card-bg); border: 1px solid var(--input-border); padding: 8px; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 1100; }

.content-section { display: none; }
.content-section.active { display: block; }

.chat-box { background: var(--bg-color); border-radius: 8px; padding: 15px; max-height: 400px; overflow-y: auto; margin: 15px 0; display: flex; flex-direction: column; gap: 10px; }
.message { padding: 10px; border-radius: 8px; max-width: 80%; font-size: 14px; word-wrap: break-word; }
.message.sent { background: var(--primary-color); color: white; align-self: flex-end; border-bottom-right-radius: 2px; }
.message.received { background: var(--input-border); align-self: flex-start; border-bottom-left-radius: 2px; }
.message.team-only { background: #4a4a4a; color: #fff; border: 1px solid #ffeb3b; }
[data-theme="light"] .message.team-only { background: #fdfae5; color: #333; border: 1px solid #fbc02d; }

/* Minecraft Colors */
.mc-c-0 { color: #000000; }
.mc-c-1 { color: #0000AA; }
.mc-c-2 { color: #00AA00; }
.mc-c-3 { color: #00AAAA; }
.mc-c-4 { color: #AA0000; }
.mc-c-5 { color: #AA00AA; }
.mc-c-6 { color: #FFAA00; }
.mc-c-7 { color: #AAAAAA; }
.mc-c-8 { color: #555555; }
.mc-c-9 { color: #5555FF; }
.mc-c-a { color: #55FF55; }
.mc-c-b { color: #55FFFF; }
.mc-c-c { color: #FF5555; }
.mc-c-d { color: #FF55FF; }
.mc-c-e { color: #FFFF55; }
.mc-c-f { color: #FFFFFF; }
.mc-f-l { font-weight: bold; }
.mc-f-m { text-decoration: line-through; }
.mc-f-n { text-decoration: underline; }
.mc-f-o { font-style: italic; }

/* Permission Lists & Suggestions */
.perm-list-container {
    background: var(--bg-color);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    padding: 5px;
    max-height: 200px;
    overflow-y: auto;
}
.perm-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    margin: 2px 0;
    background: var(--card-bg);
    border-radius: 3px;
    font-size: 13px;
}
.perm-list-item:hover {
    background: rgba(0,0,0,0.05);
}
.btn-remove {
    color: #d93025;
    cursor: pointer;
    font-weight: bold;
    padding: 0 5px;
}
.btn-remove:hover {
    transform: scale(1.2);
}
.suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--input-border);
    border-radius: 0 0 4px 4px;
    z-index: 100;
    max-height: 150px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: none;
}
.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}
.suggestion-item:hover {
    background: var(--primary-color);
    color: white;
}