/* (这是 admin.css 的全部内容) */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    background-color: #f4f7f6;
    color: #333;
}

* {
    box-sizing: border-box;
}

/* --- 顶部导航栏 --- */
.admin-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.admin-nav .logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: #007bff;
    text-decoration: none;
}

.admin-nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.admin-nav-right a,
.admin-nav-right button {
    text-decoration: none;
    color: #555;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
}
.admin-nav-right a:hover,
.admin-nav-right button:hover {
    background-color: #f0f0f0;
}
.admin-nav-right button.btn-logout {
    color: #dc3545;
}
.admin-nav-right button.btn-logout:hover {
    background-color: #dc3545;
    color: #fff;
}

/* --- 主内容区 --- */
.admin-main {
    display: flex;
    min-height: calc(100vh - 65px);
}

/* --- 侧边栏菜单 --- */
.admin-sidebar {
    flex: 0 0 220px; 
    background-color: #343a40; 
    color: #fff;
    padding-top: 20px;
}

.admin-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-menu li a {
    display: block;
    padding: 15px 25px;
    color: #adb5bd; 
    text-decoration: none;
    font-size: 1rem;
    border-left: 3px solid transparent; 
    transition: all 0.3s;
}

.admin-menu li a:hover {
    background-color: #495057;
    color: #fff;
}

.admin-menu li a.active {
    background-color: #007bff;
    color: #fff;
    font-weight: 600;
    border-left-color: #f7b733; 
}

/* --- 内容区 --- */
.admin-content {
    flex-grow: 1; 
    padding: 30px;
    overflow-y: auto;
}

.admin-content h1 {
    margin-top: 0;
    font-weight: 500;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
}

.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}

/* (仪表盘统计卡片) */
.stat-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}
.stat-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 20px 25px;
    flex-grow: 1;
    min-width: 200px;
}
.stat-card-title {
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
}
.stat-card-value {
    font-size: 2.5rem;
    font-weight: 600;
    color: #343a40;
    margin-top: 10px;
}

/* (搜索和控制栏) */
.admin-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.admin-search-bar {
    display: flex;
    flex-wrap: wrap; 
    gap: 8px;
}
.admin-search-bar input,
.admin-search-bar select { 
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    min-width: 200px; 
    height: 38px; 
}
.admin-search-bar button {
    padding: 8px 15px;
    font-size: 0.9rem;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    height: 38px; 
}
.admin-search-bar button:hover {
    background-color: #0069d9;
}

/* (管理后台表格) */
.admin-table-wrapper {
    width: 100%;
    overflow-x: auto; 
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-top: 15px;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
}
.admin-table th,
.admin-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap; 
}
.admin-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}
.admin-table tbody tr:hover {
    background-color: #f1f3f5;
}

/* (表格内的状态标签) */
.status-badge {
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}
.status-admin {
    background-color: #e6f7ff;
    color: #007bff;
}
.status-user {
    background-color: #f8f9fa;
    color: #495057;
}
.status-active {
    background-color: #e6fff0;
    color: #28a745;
}
.status-inactive {
    background-color: #fff4e6;
    color: #fd7e14;
}
.status-banned {
    background-color: #fdeeee;
    color: #dc3545;
}

/* (表格内的按钮) */
.btn-sm {
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    font-weight: 600;
    transition: all 0.3s;
}
.btn-danger {
    background-color: #dc3545;
    color: #fff;
}
.btn-danger:hover {
    background-color: #c82333;
}
.btn-success {
    background-color: #28a745;
    color: #fff;
}
.btn-success:hover {
    background-color: #218838;
}

/* (分页) */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-top: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.pagination-info {
    font-size: 0.9rem;
    color: #6c757d;
}
.pagination-controls button {
    padding: 6px 12px;
    margin-left: 5px;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
    color: #007bff;
    cursor: pointer;
}
.pagination-controls button:disabled {
    color: #6c757d;
    background-color: #e9ecef;
    cursor: not-allowed;
}
.pagination-controls button:not(:disabled):hover {
    background-color: #f8f9fa;
}


/* --- ⬇️ (这就是为您新增的 CSS 样式) ⬇️ --- */
/* (图表容器) */
.chart-widget {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 20px 25px;
    margin-top: 30px;
}
.chart-widget h2 {
    margin-top: 0;
    font-weight: 500;
    font-size: 1.2rem;
    color: #343a40;
}
#registration-chart-container {
    width: 100%;
    height: 400px; /* ECharts 需要一个固定高度 */
}
/* --- ⬆️ (新增 CSS 结束) ⬆️ --- */


/* (响应式) */
@media (max-width: 768px) {
    .admin-main {
        flex-direction: column;
    }
    .admin-sidebar {
        flex: 0 0 auto; 
        width: 100%;
        display: flex;
    }
    .admin-menu {
        display: flex;
        width: 100%;
        overflow-x: auto; 
    }
    .admin-menu li {
        flex-shrink: 0; 
    }
    .admin-menu li a {
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    .admin-content {
        padding: 20px;
    }
    .admin-nav {
        padding: 10px 15px;
    }
    .stat-card-container {
        flex-direction: column;
    }
    .admin-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-search-bar {
        flex-direction: column;
    }
    .admin-search-bar input,
    .admin-search-bar select { 
        min-width: 100%;
    }
    .pagination-container {
        flex-direction: column;
        gap: 10px;
    }
}