/**
 * 黑夜模式样式表
 * 用于新笔送审平台的主题切换功能
 */

/* 黑夜模式 CSS 变量 */
:root[data-theme="dark"] {
    --bg-primary: #1a1d21;
    --bg-secondary: #222730;
    --bg-tertiary: #292f3a;
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --border-color: #373f50;
    --card-bg: #222730;
    --menu-bg: #1f2229;
    --hover-bg: #2c323e;
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.5);
}

/* 黑夜模式基础样式 */
body.dark-mode {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body.dark-mode .content-page,
body.dark-mode .topbar,
body.dark-mode .navbar-custom,
body.dark-mode .sidebar-menu,
body.dark-mode #wrapper,
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .table-responsive table,
body.dark-mode .dataTables_wrapper,
body.dark-mode .accordion,
body.dark-mode .list-group-item,
body.dark-mode .popover,
body.dark-mode .tooltip-inner {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* 顶部导航栏细节 */
body.dark-mode .navbar-custom {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .card {
    border-color: var(--border-color);
    box-shadow: 0 0 1px var(--border-color);
}

body.dark-mode .card-header,
body.dark-mode .card-footer {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* 表格样式 */
body.dark-mode .table {
    color: var(--text-primary);
}

body.dark-mode .table thead th,
body.dark-mode .table thead td {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .table tbody td,
body.dark-mode .table tbody tr {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: var(--hover-bg);
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* 表单元素 */
body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode .input-group-text,
body.dark-mode .form-control-file {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .form-control:focus,
body.dark-mode .custom-select:focus {
    background-color: var(--bg-tertiary);
    border-color: #4379EE;
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(67, 121, 238, 0.25);
}

body.dark-mode .form-control::placeholder {
    color: var(--text-secondary);
}

body.dark-mode .input-group > .input-group-append > .input-group-text,
body.dark-mode .input-group > .input-group-prepend > .input-group-text {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* 文本颜色 */
body.dark-mode .page-title-box h4,
body.dark-mode .header-title,
body.dark-mode .mini-stat-desc h6,
body.dark-mode .navbar-custom .nav-link,
body.dark-mode .button-menu-mobile {
    color: var(--text-primary) !important;
}

body.dark-mode .text-muted,
body.dark-mode .badge,
body.dark-mode .breadcrumb-item.active {
    color: var(--text-secondary) !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: var(--text-primary);
}

/* 下拉菜单 */
body.dark-mode .dropdown-menu {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    box-shadow: 0 0.5rem 2.5rem var(--shadow-md);
}

body.dark-mode .dropdown-item {
    color: var(--text-primary);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

body.dark-mode .dropdown-divider {
    border-color: var(--border-color);
}

/* 侧边栏菜单 - 修复选择器以匹配实际 HTML 结构 */
body.dark-mode .left.side-menu,
body.dark-mode .left-menu,
body.dark-mode #sidebar-menu,
body.dark-mode .sidebar-inner {
    background-color: var(--menu-bg) !important;
}

body.dark-mode .left.side-menu ul li a,
body.dark-mode .left-menu ul li a,
body.dark-mode #sidebar-menu ul li a {
    color: var(--text-secondary) !important;
}

body.dark-mode .left.side-menu ul li a:hover,
body.dark-mode .left-menu ul li a:hover,
body.dark-mode #sidebar-menu ul li a:hover,
body.dark-mode .left.side-menu ul li a.active,
body.dark-mode .left-menu ul li a.active,
body.dark-mode #sidebar-menu ul li a.active {
    color: var(--text-primary) !important;
    background-color: var(--hover-bg) !important;
}


body.dark-mode .left.side-menu .user-panel,
body.dark-mode .left-menu .user-panel,
body.dark-mode #sidebar-menu .user-panel {
    border-color: var(--border-color);
    background-color: var(--bg-tertiary);
}

body.dark-mode .left.side-menu .user-panel img,
body.dark-mode .left-menu .user-panel img,
body.dark-mode #sidebar-menu .user-panel img {
    border-color: var(--border-color);
}

/* 子菜单样式 */
body.dark-mode .has_sub > ul {
    background-color: var(--bg-tertiary);
}

body.dark-mode .has_sub > ul > li > a {
    color: var(--text-secondary);
}

body.dark-mode .has_sub > ul > li > a:hover,
body.dark-mode .has_sub > ul > li > a.active {
    color: var(--text-primary);
    background-color: var(--hover-bg);
}

/* 菜单箭头 */
body.dark-mode .menu-arrow,
body.dark-mode .menu-arrow i {
    color: var(--text-secondary) !important;
}

/* 按钮样式 */
body.dark-mode .btn-light {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

/* 模态框 */
body.dark-mode .modal-content {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: var(--border-color);
    background-color: var(--bg-tertiary);
}

body.dark-mode .modal-body {
    background-color: var(--bg-secondary);
}

/* 警告框和提示框 */
body.dark-mode .alert-info {
    background-color: rgba(23, 162, 184, 0.15);
    border-color: rgba(23, 162, 184, 0.3);
    color: #5ecde6;
}

body.dark-mode .alert-success {
    background-color: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    color: #69f0ae;
}

body.dark-mode .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffe082;
}

body.dark-mode .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);
    color: #ff8a80;
}

/* 滚动条 */
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4a5568;
}

/* 分割线 */
body.dark-mode hr,
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-left,
body.dark-mode .border-right {
    border-color: var(--border-color) !important;
}

/* 分页 */
body.dark-mode .page-link {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .page-link:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

body.dark-mode .page-item.active .page-link {
    background-color: #4379EE;
    border-color: #4379EE;
}

body.dark-mode .page-item.disabled .page-link {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* 标签页 */
body.dark-mode .nav-tabs {
    border-bottom-color: var(--border-color);
}

body.dark-mode .nav-tabs .nav-link {
    color: var(--text-secondary);
}

body.dark-mode .nav-tabs .nav-link:hover,
body.dark-mode .nav-tabs .nav-link.active {
    color: var(--text-primary);
    border-color: var(--border-color);
    background-color: transparent;
}

/* 卡片和其他组件 */
body.dark-mode .popover {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .popover-header {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .popover-body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-mode .tooltip-inner {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* 进度条 */
body.dark-mode .progress {
    background-color: var(--bg-tertiary);
}

/* 列表组 */
body.dark-mode .list-group-item {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .list-group-item:hover {
    background-color: var(--hover-bg);
}

/* 徽章样式 */
body.dark-mode .badge-light {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* 主题切换按钮特殊样式 */
#light-dark-mode i {
    transition: transform 0.3s ease;
}

#light-dark-mode:hover i {
    transform: rotate(360deg);
}

#light-dark-mode::after {
    content: '切换主题';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

body.dark-mode #light-dark-mode::after {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
}

#light-dark-mode:hover::after {
    opacity: 1;
    visibility: visible;
}

/* 打印样式 */
@media print {
    body.dark-mode {
        background-color: #fff;
        color: #000;
    }
    
    body.dark-mode * {
        background-color: transparent !important;
        color: #000 !important;
    }
}



body.dark-mode #sidebar-menu > ul > li > a.active i{color: #fff;}
