:root {
    --bg-dark: #121212; --bg-panel: #1e1e1e; --text-main: #ffffff;
    --text-muted: #a0a0a0; --border: #333333; --accent: #4CAF50; --danger: #f44336; 
}
:root[data-mode="light"] {
    --bg-dark: #f4f6f8; --bg-panel: #ffffff; --text-main: #121212;
    --text-muted: #666666; --border: #e0e0e0;
}
/* Theme Colors */
:root[data-theme="green"] { --accent: #4CAF50; } :root[data-theme="blue"] { --accent: #2196F3; }
:root[data-theme="red"] { --accent: #F44336; } :root[data-theme="purple"] { --accent: #9C27B0; }
:root[data-theme="orange"] { --accent: #FF9800; } :root[data-theme="teal"] { --accent: #009688; }
:root[data-theme="cyan"] { --accent: #00BCD4; } :root[data-theme="yellow"] { --accent: #FFEB3B; }
:root[data-theme="amber"] { --accent: #FFC107; } :root[data-theme="deep-orange"] { --accent: #FF5722; }

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }
body { background-color: var(--bg-dark); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; transition: 0.3s; }

/* Layout Core */
.dashboard-container { display: flex; width: 100%; }
.sidebar { width: 250px; background-color: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 0; transition: 0.3s; }
.brand { padding: 0 20px 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.main-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.top-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; background-color: var(--bg-panel); border-bottom: 1px solid var(--border); }
.content-sections { padding: 30px; }

/* Navigation */
.nav-btn { display: block; text-decoration: none; color: var(--text-muted); padding: 15px 20px; font-size: 16px; transition: 0.3s; border-left: 3px solid transparent; background: transparent; text-align: left; }
.nav-btn:hover, .nav-btn.active { background-color: rgba(128,128,128,0.1); color: var(--accent); border-left: 3px solid var(--accent); }

/* UI Elements */
.user-info { display: flex; align-items: center; gap: 15px; }
#user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.user-details { display: flex; flex-direction: column; }
.badge { font-size: 12px; background-color: var(--accent); color: #000; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-top: 4px; font-weight: bold; }
.admin-card { background-color: var(--bg-panel); padding: 20px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 20px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .admin-grid { grid-template-columns: 1fr; } }

/* Forms & Buttons */
input, select, textarea { width: 100%; padding: 10px; margin: 10px 0; background-color: var(--bg-dark); border: 1px solid var(--border); color: var(--text-main); border-radius: 4px; outline: none; transition: 0.3s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
button { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.2s;}
button.primary-btn { background-color: var(--accent); color: #000; }
button.primary-btn:hover { filter: brightness(1.1); }
button.danger-btn { background-color: var(--danger); color: #fff; }

/* Modals */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 9999; }
.modal-content { background-color: var(--bg-panel); padding: 30px; border-radius: 8px; width: 400px; max-width: 90%; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

/* Home Widgets & Customisation */
.home-widgets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
@media (max-width: 1100px) { .home-widgets-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .home-widgets-grid { grid-template-columns: 1fr; } }
.mini-list-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.mini-list-item:last-child { border-bottom: none; }
.mini-list-title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 10px; margin-top: 15px; }
.theme-swatch { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
.theme-swatch:hover { transform: scale(1.1); }
.theme-swatch.active { border-color: var(--text-main); }

/* Mail & Tasks */
.mail-layout { display: flex; gap: 20px; height: 100%; min-height: 500px; }
.mail-sidebar { width: 200px; display: flex; flex-direction: column; gap: 10px; }
.mail-content { flex: 1; display: flex; flex-direction: column; background: var(--bg-panel); border-radius: 8px; border: 1px solid var(--border); overflow: hidden; position: relative; }
.mail-folder-btn { padding: 12px; text-align: left; background: none; border: none; color: var(--text-main); cursor: pointer; border-radius: 4px; font-weight: bold; }
.mail-folder-btn.active, .mail-folder-btn:hover { background: rgba(128,128,128,0.1); color: var(--accent); }
.mail-list-container { overflow-y: auto; flex: 1; }
.mail-item { padding: 15px 20px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.mail-item:hover { background: rgba(128,128,128,0.1); }
.mail-item-sender { width: 200px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--accent); }
.mail-item-subject { flex: 1; margin: 0 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item-date { font-size: 12px; color: var(--text-muted); width: 80px; text-align: right; }
.mail-read-view { padding: 30px; display: none; flex-direction: column; height: 100%; overflow-y: auto; }
.mail-read-header { border-bottom: 1px solid var(--border); padding-bottom: 15px; margin-bottom: 15px; }
.mail-read-body { font-size: 15px; line-height: 1.6; white-space: pre-wrap; color: var(--text-main); }
.compose-window { display: none; position: fixed; bottom: 0; right: 30px; width: 450px; max-width: 100%; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px 8px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,0.7); flex-direction: column; z-index: 1000; }
.compose-header { background: rgba(128,128,128,0.1); padding: 12px 15px; border-radius: 8px 8px 0 0; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
.compose-header button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0; }
.compose-body { padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.compose-input { border: none; border-bottom: 1px solid var(--border); padding: 8px 0; margin: 0; background: transparent; }
.compose-textarea { border: none; padding: 10px 0; height: 200px; resize: none; margin: 0; background: transparent; }
.mail-search-bar { padding: 15px; border-bottom: 1px solid var(--border); background: var(--bg-panel); }
.mail-search-bar input { margin: 0; }

.controls-bar { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; background: var(--bg-panel); padding: 15px; border-radius: 8px; border: 1px solid var(--border); }
.search-input { flex: 1; margin: 0; }
.filter-select { width: 160px; margin: 0; }
.task-item { padding: 15px 20px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; cursor: pointer; background: var(--bg-panel); display: flex; justify-content: space-between; align-items: center; }
.task-item:hover { background: rgba(128,128,128,0.1); border-color: var(--accent); }
.task-item-title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.task-detail-view { background: var(--bg-panel); padding: 30px; border-radius: 8px; border: 1px solid var(--border); }
.back-btn { background: none; border: none; color: var(--accent); cursor: pointer; text-align: left; margin-bottom: 20px; font-weight: bold; font-size: 14px; padding: 0; }
.back-btn:hover { text-decoration: underline; }
.task-content-box { background: var(--bg-dark); padding: 20px; border-radius: 4px; margin-bottom: 20px; border: 1px solid var(--border); min-height: 100px; }
.fail-box { color: var(--danger); margin-bottom: 20px; padding: 15px; border: 1px solid var(--danger); border-radius: 4px; background: rgba(244, 67, 54, 0.1); }
.staff-list-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--border); }
.staff-list-item:last-child { border-bottom: none; }

/* --- NEW: TABS & ACTIVITY LOG STYLES --- */
.tabs-container { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.tab-btn { background: none; border: none; color: var(--text-muted); font-size: 16px; font-weight: bold; cursor: pointer; padding: 10px 20px; border-radius: 4px; transition: 0.2s; }
.tab-btn:hover { background: rgba(128,128,128,0.1); color: var(--text-main); }
.tab-btn.active { background: var(--accent); color: #000; }

.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.status-online { background-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
.status-offline { background-color: var(--text-muted); }

.log-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.log-table th, .log-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
.log-table th { color: var(--text-muted); font-weight: bold; background: rgba(128,128,128,0.05); }
.log-table tr:hover { background: rgba(128,128,128,0.1); }