/* Ximuiot Admin Custom CSS - 统一后台管理样式 */

/* ===== 顶部导航栏样式 ===== */
#header {
    background: #2C3E50 !important;
    height: 56px;
    border-bottom: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#header a {
    color: #fff !important;
    font-family: 'Microsoft YaHei', 'Verdana', Arial, sans-serif;
    font-weight: 500;
}

#site-name {
    color: white !important;
    font-size: 20px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

#branding h1 {
    color: #fff;
    font-size: 24px;
    font-family: 'Microsoft YaHei', 'Verdana', Arial, sans-serif;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

#header .user-tools {
    color: white !important;
    font-weight: 500;
}

#header .user-tools a {
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

#header .user-tools a:hover {
    color: white !important;
    background: rgba(255,255,255,0.2);
}

/* ===== 手机端响应式设计 ===== */
@media (max-width: 767px) {
    /* 确保手机端侧边栏切换按钮可见 */
    #toggle-nav-sidebar {
        display: flex !important;
        z-index: 1001 !important;
    }

    /* 手机端遮罩层样式 */
    .sidebar-overlay {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }

    /* 手机端侧边栏样式优化 */
    #nav-sidebar.mobile-open {
        left: 0 !important;
    }

    /* 手机端内容区域优化 */
    .main > #nav-sidebar + .content,
    .main.shifted > #nav-sidebar + .content {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ===== 暗色主题样式 ===== */
/* 基础暗色背景 */
html[data-theme="dark"] body,
html[data-theme="dark"] #container,
html[data-theme="dark"] #main,
html[data-theme="dark"] #content {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* 侧边栏 - 强制覆盖渐变背景 */
html[data-theme="dark"] #nav-sidebar {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    background-image: none !important;
    border-right: 1px solid #333 !important;
}

html[data-theme="dark"] #nav-sidebar,
html[data-theme="dark"] #nav-sidebar * {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    background-image: none !important;
    color: #e0e0e0 !important;
}

/* 手机端暗色主题 */
html[data-theme="dark"] .sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] #toggle-nav-sidebar {
    background-color: #2d2d2d !important;
    border-right: 1px solid #444 !important;
}

html[data-theme="dark"] #toggle-nav-sidebar:hover {
    background-color: #3d3d3d !important;
}

/* 通用模块 */
html[data-theme="dark"] .module,
html[data-theme="dark"] .sticky,
html[data-theme="dark"] .panel {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
}

html[data-theme="dark"] .module h2,
html[data-theme="dark"] .module h3,
html[data-theme="dark"] .module caption {
    background-color: #2d2d2d !important;
    color: #fff !important;
}

html[data-theme="dark"] .module td,
html[data-theme="dark"] .module th {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

html[data-theme="dark"] .module tr.row1 {
    background-color: #252525 !important;
}

html[data-theme="dark"] .module tr.row2 {
    background-color: #2a2a2a !important;
}

html[data-theme="dark"] .module tr:hover {
    background-color: #303030 !important;
}

/* 表单元素 */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: #4fc3f7 !important;
    outline-color: #4fc3f7 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #888 !important;
}

/* 按钮 */
html[data-theme="dark"] button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .button,
html[data-theme="dark"] .default,
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] a.button {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] button:hover,
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .default:hover,
html[data-theme="dark"] input[type="button"]:hover,
html[data-theme="dark"] input[type="submit"]:hover,
html[data-theme="dark"] a.button:hover {
    background-color: #3d3d3d !important;
    border-color: #555 !important;
    color: #fff !important;
}

/* 链接 */
html[data-theme="dark"] a,
html[data-theme="dark"] a:link,
html[data-theme="dark"] a:visited {
    color: #4fc3f7 !important;
}

html[data-theme="dark"] a:hover {
    color: #81d4fa !important;
}

/* 导航和过滤器 */
html[data-theme="dark"] .navigation,
html[data-theme="dark"] #changelist-filter,
html[data-theme="dark"] #searchbar,
html[data-theme="dark"] .actions,
html[data-theme="dark"] .object-tools,
html[data-theme="dark"] .breadcrumbs {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .navigation li,
html[data-theme="dark"] #changelist-filter ul li,
html[data-theme="dark"] #changelist-filter h3,
html[data-theme="dark"] #changelist-filter h4 {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .navigation a:hover,
html[data-theme="dark"] #changelist-filter ul li.selected {
    background-color: #4fc3f7 !important;
    color: #000 !important;
}

/* 分页器 */
html[data-theme="dark"] .paginator a,
html[data-theme="dark"] .paginator span {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .paginator a:hover {
    background-color: #3d3d3d !important;
    color: #fff !important;
}

/* 消息提示 */
html[data-theme="dark"] .messagelist li {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .messagelist li.warning {
    background-color: #3d3d2d !important;
    border-color: #666633 !important;
    color: #fff3cd !important;
}

html[data-theme="dark"] .messagelist li.error {
    background-color: #3d2d2d !important;
    border-color: #663333 !important;
    color: #f8d7da !important;
}

html[data-theme="dark"] .messagelist li.success {
    background-color: #2d3d2d !important;
    border-color: #336633 !important;
    color: #d4edda !important;
}