/* --- Base and Shared Styles --- */
body {
    background-color: #f8f9fa;
    color: #212529;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.card, .task-card, .profile-card, .tasks-card { /* General card styling */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.card:hover, .task-card:hover, .profile-card:hover, .tasks-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.list-group-item {
    background-color: #fff;
    border-color: #e9ecef;
}

.nav-pills .nav-link {
    margin-right: 0.5rem;
}

.text-muted {
    color: #6c757d !important; /* Ensure override */
}

a {
    color: #0d6efd;
    text-decoration: none; /* Optional: remove underline */
}

a:hover {
    color: #0a58ca;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #fff;
}

/* --- Dark Mode Base Styles --- */
body.dark-mode {
    background-color: #212529;
    color: #dee2e6;
}

body.dark-mode .card,
body.dark-mode .task-card,
body.dark-mode .profile-card,
body.dark-mode .tasks-card {
    background-color: #343a40;
    border-color: #495057;
    color: #dee2e6;
}

 body.dark-mode .card:hover,
 body.dark-mode .task-card:hover,
 body.dark-mode .profile-card:hover,
 body.dark-mode .tasks-card:hover {
     box-shadow: 0 0.5rem 1.5rem rgba(255, 255, 255, 0.05);
 }

body.dark-mode .card-header {
    background-color: #495057;
    border-bottom-color: #6c757d;
}

body.dark-mode .list-group-item {
    background-color: #343a40;
    border-color: #495057;
    color: #dee2e6;
}

body.dark-mode .list-group-item a {
    color: #adb5bd;
}

body.dark-mode .list-group-item a:hover {
    color: #f8f9fa;
}

body.dark-mode .text-muted {
    color: #adb5bd !important;
}

body.dark-mode .border-bottom {
    border-bottom-color: #495057 !important;
}

body.dark-mode .nav-pills .nav-link {
    color: #adb5bd;
}

body.dark-mode .nav-pills .nav-link.active {
    background-color: #0d6efd;
    color: #fff;
}

body.dark-mode .btn-outline-secondary {
    color: #adb5bd;
    border-color: #adb5bd;
}

body.dark-mode .btn-outline-secondary:hover {
     background-color: #adb5bd;
     color: #212529;
}

body.dark-mode .alert-danger {
    color: #f8d7da;
    background-color: #58151c;
    border-color: #a71d2a;
}

/* 高权限用户面板的特殊样式 */
.container.elevated-user {
    border: 2px dashed #007bff; /* 示例：添加一个蓝色虚线边框 */
    padding: 20px; /* 调整内边距 */
    background-color: #e9ecef; /* 示例：添加一个浅灰色背景 */
}

/* 针对管理员用户的进一步定制 */
.container.admin-user {
    border-color: #dc3545; /* 示例：管理员边框变红色 */
}

/* 针对开发者用户的进一步定制 */
.container.dev-user {
    border-color: #17a2b8; /* 示例：开发者边框变青色 */
}

/* 头部用户名旁边的徽章样式（已经在HTML中添加了） */
.badge.bg-danger { /* 管理员徽章样式 */ }
.badge.bg-primary { /* 开发者徽章样式 */ }

/* 其他需要区分显示的部分也可以利用这些类 */

/* Dark Mode Toggle Button Icons */
#darkModeToggle .bi-sun-fill { display: none; }
body.dark-mode #darkModeToggle .bi-sun-fill { display: inline-block; }
body.dark-mode #darkModeToggle .bi-moon-stars-fill { display: none; }