/* ============================================
   知择教育 - 统一视觉升级覆盖层
   基于"源力"设计系统配色规范
   ============================================ */

/* --- 全局基础 --- */
* {
    box-sizing: border-box;
}

body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- CSS 变量覆盖 --- */
:root {
    --primary-dark: #1d2129;
    --primary-color: #0055ff;
    --primary-color-hover: #1664ff;
    --primary-color-active: #003dcc;
    --primary-color-light: #e8f3ff;
    --primary-color-bg: #f3f7ff;
    --primary-gradient: linear-gradient(135deg, #5B9BD5 0%, #93C5FD 40%, #E8F4FF 100%);
    --bg-light: #f7f8fa;
    --bg-white: #ffffff;
    --card-shadow: 0 1px 4px rgba(0,0,0,0.06);
    --card-shadow-hover: 0 4px 16px rgba(0,85,255,0.1);
    --text-primary: #1d2129;
    --text-secondary: #4e5969;
    --text-muted: #86909c;
    --border-color: #e5e6eb;
    --border-color-light: #f2f3f5;
    --risk-high: #f65159;
    --risk-mid: #387bff;
    --risk-low: #00b42a;
    --success-bg: #e8ffea;
    --warning-bg: #fff7e8;
    --danger-bg: #ffece8;
    --info-bg: #e8f3ff;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* --- 侧边栏升级 --- */
.sidebar {
    background: #1d2129 !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}

.sidebar .logo-area,
.sidebar .logo-section {
    border-bottom: none !important;
}

.sidebar .logo-icon {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.sidebar .nav-item-link,
.sidebar .nav-item,
.sidebar .nav-link {
    color: #c9cdd4 !important;
    transition: all 0.2s ease !important;
    border-radius: 6px !important;
}

.sidebar .nav-item-link:hover,
.sidebar .nav-item:hover,
.sidebar .nav-link:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

.sidebar .nav-item-link.active,
.sidebar .nav-item.active,
.sidebar .nav-link.active {
    background: var(--primary-gradient) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(51,153,255,0.35) !important;
}

.sidebar .nav-item-link.active::before,
.sidebar .nav-item.active::before,
.sidebar .nav-link.active::before {
    display: none !important;
}

.sidebar .nav-label,
.sidebar .nav-group-label {
    color: #86909c !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.sidebar .sidebar-footer {
    background: rgba(0,0,0,0.15) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* --- 顶栏升级 --- */
.top-bar,
.topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e6eb !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

.top-bar h1,
.topbar h1 {
    color: #1d2129 !important;
    font-weight: 600 !important;
}

/* --- 卡片升级 --- */
.card,
.card-modern,
[class*="card"] {
    background: #ffffff !important;
    border: 1px solid #e5e6eb !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.card:hover,
.card-modern:hover {
    box-shadow: 0 4px 16px rgba(0,85,255,0.08) !important;
    border-color: #c9cdd4 !important;
}

.card-header,
.card-header-modern,
[class*="card"] [class*="header"] {
    border-bottom: 1px solid #f2f3f5 !important;
}

.card-header h6,
.card-header-modern h6 {
    color: #1d2129 !important;
    font-weight: 600 !important;
}

/* --- 按钮升级 --- */
.btn-primary,
[class*="btn-primary"],
.btn-action,
.btn-action-sm {
    background: #0055ff !important;
    border-color: #0055ff !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover,
[class*="btn-primary"]:hover,
.btn-action:hover {
    background: #1664ff !important;
    border-color: #1664ff !important;
}

.btn-primary:active,
[class*="btn-primary"]:active,
.btn-action:active {
    background: #003dcc !important;
    border-color: #003dcc !important;
}

.btn-secondary,
.btn-outline {
    background: #ffffff !important;
    border: 1px solid #e5e6eb !important;
    color: #4e5969 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-secondary:hover,
.btn-outline:hover {
    border-color: #0055ff !important;
    color: #0055ff !important;
    background: #f3f7ff !important;
}

.btn-filter {
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

/* --- 表单控件升级 --- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
    border: 1px solid #e5e6eb !important;
    border-radius: 6px !important;
    color: #1d2129 !important;
    background: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    font-size: 14px !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: #0055ff !important;
    box-shadow: 0 0 0 2px rgba(0, 85, 255, 0.1) !important;
    outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #c9cdd4 !important;
}

/* --- 表格升级 --- */
.table,
table {
    border-collapse: collapse !important;
}

.table th,
table thead th {
    background: #f7f8fa !important;
    color: #4e5969 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-bottom: 1px solid #e5e6eb !important;
    padding: 10px 16px !important;
}

.table td,
table tbody td {
    color: #1d2129 !important;
    border-bottom: 1px solid #f2f3f5 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
}

.table tbody tr:hover,
table tbody tr:hover {
    background: #f3f7ff !important;
}

/* --- 标签/徽章升级 --- */
.badge,
[class*="badge"] {
    border-radius: 4px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    padding: 2px 8px !important;
}

/* --- 进度条升级 --- */
.progress,
.progress-bar {
    border-radius: 4px !important;
}

/* --- 统计卡片升级 --- */
.stat-card,
.welcome-stat-item,
[class*="stat"] {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.stat-card:hover,
.welcome-stat-item:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0,85,255,0.08) !important;
}

/* --- Tab 标签升级 --- */
.nav-tabs,
.tab-nav {
    border-bottom: 1px solid #e5e6eb !important;
}

.nav-tabs .nav-link,
.tab-nav .tab-link {
    color: #4e5969 !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.tab-nav .tab-link.active,
.tab-nav .tab-link:hover {
    color: #0055ff !important;
    border-bottom-color: #0055ff !important;
}

/* --- 分页升级 --- */
.pagination,
.page-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.pagination button,
.page-nav button,
.page-link {
    border: 1px solid #e5e6eb !important;
    background: #ffffff !important;
    color: #4e5969 !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.pagination button:hover,
.page-nav button:hover,
.page-link:hover:not(:disabled) {
    border-color: #0055ff !important;
    color: #0055ff !important;
    background: #f3f7ff !important;
}

.pagination button.active,
.page-nav button.active {
    background: #0055ff !important;
    border-color: #0055ff !important;
    color: #ffffff !important;
}

.pagination button:disabled,
.page-nav button:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* --- 模态框升级 --- */
.modal,
.modal-content,
.modal-dialog {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

.modal-header {
    border-bottom: 1px solid #e5e6eb !important;
}

.modal-footer {
    border-top: 1px solid #e5e6eb !important;
}

/* --- 开关/切换升级 --- */
.toggle-switch,
.switch {
    transition: all 0.2s ease !important;
}

/* --- 滚动条美化 --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c9cdd4;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #86909c;
}

/* --- 通知面板升级 --- */
.notification-panel,
[id*="notificationPanel"],
[id*="notification"] {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    border: 1px solid #e5e6eb !important;
}

/* --- 空状态升级 --- */
.empty-state {
    color: #86909c !important;
}

.empty-state i {
    font-size: 48px !important;
    color: #c9cdd4 !important;
}

/* --- 风险等级颜色 --- */
.risk-high,
.danger {
    color: #f65159 !important;
}

.risk-mid,
.warning {
    color: #387bff !important;
}

.risk-low,
.success {
    color: #00b42a !important;
}

/* --- 主内容区域 --- */
.main-content,
.content-area {
    background: #f7f8fa !important;
}

/* --- 页面头部栏 --- */
.page-header-bar,
.breadcrumb-area {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e6eb !important;
}

/* --- 搜索框升级 --- */
.search-box,
.search-input,
[class*="search"] {
    border-radius: 6px !important;
}

/* --- 图表标题 --- */
.chart-title,
.log-title {
    color: #1d2129 !important;
    font-weight: 600 !important;
}

/* --- 链接色 --- */
a {
    color: #0055ff !important;
    text-decoration: none !important;
}

a:hover {
    color: #1664ff !important;
}

/* --- 选择器升级 --- */
select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234e5969' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 30px !important;
}

/* --- 动画优化 (去除过度动效) --- */
.card-modern,
.card,
[class*="card"] {
    animation: none !important;
}

/* --- 选中/激活状态统一 --- */
.btn-filter.active,
.filter-active {
    background: #0055ff !important;
    color: #ffffff !important;
    border-color: #0055ff !important;
}

/* --- 侧边栏用户信息 --- */
.sidebar .user-info {
    color: #c9cdd4 !important;
}

.sidebar .user-info .user-name {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.sidebar .user-info .user-role {
    color: #86909c !important;
    font-size: 12px !important;
}

/* --- 图标按钮 --- */
.btn-icon,
.btn-icon-top {
    transition: all 0.2s ease !important;
    border-radius: 6px !important;
}

.btn-icon:hover,
.btn-icon-top:hover {
    background: #f3f7ff !important;
    color: #0055ff !important;
}

/* --- 标签页内容 --- */
.tab-content,
.tab-pane {
    animation: none !important;
}

/* --- 管理员渐变 (保留橙色区分) --- */
.admin-gradient,
.admin-badge {
    background: linear-gradient(135deg, #ff7d00, #f65159) !important;
}

/* --- 帮助/提示区域 --- */
.help-text,
.hint-text {
    color: #86909c !important;
    font-size: 12px !important;
}

/* --- 分割线 --- */
hr,
.divider {
    border-color: #f2f3f5 !important;
}

/* --- 加载状态 --- */
.loading,
.spinner {
    color: #0055ff !important;
}

/* --- 工具提示 --- */
.tooltip-inner {
    background: #1d2129 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

/* --- 暗色模式适配 --- */
body.dark-mode {
    background-color: #1d2129 !important;
    color: #c9cdd4 !important;
}

body.dark-mode .sidebar {
    background: #17171a !important;
    border-color: rgba(255,255,255,0.06) !important;
}

body.dark-mode .main-content,
body.dark-mode .content-area {
    background: #1d2129 !important;
}

body.dark-mode .top-bar,
body.dark-mode .topbar {
    background: #1d2129 !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

body.dark-mode .top-bar h1,
body.dark-mode .topbar h1 {
    color: #f2f3f5 !important;
}

body.dark-mode .card,
body.dark-mode .card-modern,
body.dark-mode [class*="card"] {
    background: #262a33 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #c9cdd4 !important;
}

body.dark-mode .card:hover,
body.dark-mode .card-modern:hover {
    border-color: rgba(0, 85, 255, 0.3) !important;
}

body.dark-mode .card-header,
body.dark-mode .card-header-modern {
    background: #262a33 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body.dark-mode .card-header h6,
body.dark-mode .card-header-modern h6 {
    color: #f2f3f5 !important;
}

body.dark-mode .form-control,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: #262a33 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #c9cdd4 !important;
}

body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #0055ff !important;
    box-shadow: 0 0 0 2px rgba(0, 85, 255, 0.15) !important;
}

body.dark-mode .table th,
body.dark-mode table thead th {
    background: #262a33 !important;
    color: #86909c !important;
    border-color: rgba(255,255,255,0.06) !important;
}

body.dark-mode .table td,
body.dark-mode table tbody td {
    color: #c9cdd4 !important;
    border-color: rgba(255,255,255,0.06) !important;
}

body.dark-mode .table tbody tr:hover,
body.dark-mode table tbody tr:hover {
    background: rgba(0, 85, 255, 0.06) !important;
}

body.dark-mode .nav-item-link:hover,
body.dark-mode .nav-item:hover,
body.dark-mode .nav-link:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #f2f3f5 !important;
}

body.dark-mode .nav-item-link.active,
body.dark-mode .nav-item.active,
body.dark-mode .nav-link.active {
    background: rgba(0, 85, 255, 0.2) !important;
    color: #1664ff !important;
}

body.dark-mode .nav-label,
body.dark-mode .nav-group-label {
    color: #4e5969 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #f2f3f5 !important;
}

body.dark-mode .page-header-bar,
body.dark-mode .breadcrumb-area {
    background: #1d2129 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-outline {
    background: #262a33 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #c9cdd4 !important;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-outline:hover {
    border-color: #0055ff !important;
    color: #0055ff !important;
    background: rgba(0, 85, 255, 0.1) !important;
}

body.dark-mode .sidebar-footer {
    background: rgba(0,0,0,0.2) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

body.dark-mode .empty-state {
    color: #4e5969 !important;
}

body.dark-mode .btn-icon-top:hover {
    color: #f2f3f5 !important;
    background: rgba(255,255,255,0.08) !important;
}

body.dark-mode .welcome-stat-item .stat-num {
    color: #f2f3f5 !important;
}

body.dark-mode .form-section-title {
    color: #f2f3f5 !important;
}

body.dark-mode .pagination button,
body.dark-mode .page-nav button {
    background: #262a33 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #c9cdd4 !important;
}

body.dark-mode .pagination button:hover,
body.dark-mode .page-nav button:hover {
    border-color: #0055ff !important;
    color: #0055ff !important;
    background: rgba(0, 85, 255, 0.1) !important;
}

body.dark-mode .pagination button.active,
body.dark-mode .page-nav button.active {
    background: #0055ff !important;
    border-color: #0055ff !important;
    color: #ffffff !important;
}

body.dark-mode .dark-mode-toggle-float {
    background-color: #262a33 !important;
    color: #f2f3f5 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #4e5969;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #86909c;
}

body.dark-mode .modal,
body.dark-mode .modal-content {
    background: #262a33 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body.dark-mode .modal-header {
    border-color: rgba(255,255,255,0.08) !important;
}

body.dark-mode .modal-footer {
    border-color: rgba(255,255,255,0.08) !important;
}

body.dark-mode a {
    color: #1664ff !important;
}

body.dark-mode a:hover {
    color: #387bff !important;
}

body.dark-mode hr,
body.dark-mode .divider {
    border-color: rgba(255,255,255,0.06) !important;
}

body.dark-mode .log-title,
body.dark-mode .chart-title {
    color: #f2f3f5 !important;
}

body.dark-mode .notification-panel,
body.dark-mode [id*="notificationPanel"] {
    background: #262a33 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body.dark-mode .toggle-switch {
    background: #4e5969 !important;
}

body.dark-mode .toggle-switch.active {
    background: #0055ff !important;
}