/*
 * 深色模式覆盖样式 (2026-09-05)
 * 仅在 html[data-theme="dark"] 时生效；浅色(默认)模式使用 dark-theme.css 米色主题。
 * 选择器统一加 html[data-theme="dark"] 前缀，特异性高于 dark-theme.css 的同名规则，
 * 叠加 !important 即可覆盖米色主题的强制色。
 *
 * 注意：d-table/d-input/d-dialog 等 Web Component 内部的 Shadow DOM 样式
 * 由 theme.js 运行时注入深色覆盖，本文件只负责普通 light DOM 部分。
 * 调整深色配色时请与 theme.js 中的 DARK_SHADOW_CSS 保持一致。
 */

html[data-theme="dark"] {
    color-scheme: dark;
}

/* ---------- 页面骨架 ---------- */
html[data-theme="dark"], html[data-theme="dark"] body {
    background: #14181f !important;
    color: #d5dbe2 !important;
}
html[data-theme="dark"] #legend-wrap {
    background: #14181f !important;
}
html[data-theme="dark"] #page-main {
    background: #14181f !important;
    color: #d5dbe2 !important;
}

/* ---------- 顶部导航 ---------- */
html[data-theme="dark"] #legend-header {
    background: #1a2028 !important;
    border-bottom: 1px solid #2e3844 !important;
}
html[data-theme="dark"] #legend-header .navbar-item,
html[data-theme="dark"] #legend-header a,
html[data-theme="dark"] #legend-header .icon {
    color: #d5dbe2 !important;
}
html[data-theme="dark"] #legend-header .navbar-logo b {
    color: #D94F5C !important;
}
html[data-theme="dark"] #legend-header .navbar-item > span {
    color: #9aa4b1 !important; /* 区服标签（内联米色，需 !important 覆盖） */
}
html[data-theme="dark"] #server-selector {
    background: #14181f !important;
    color: #d5dbe2 !important;
    border-color: #313b48 !important;
}

/* ---------- 侧边菜单（顶部横向菜单） ---------- */
html[data-theme="dark"] #legend-side-menu {
    background: #1a2028 !important;
    border-bottom: 1px solid #2e3844 !important;
}
html[data-theme="dark"] #legend-side-menu .menu-category-title {
    color: #9aa4b1 !important;
}
html[data-theme="dark"] #legend-side-menu .menu-category:hover .menu-category-title,
html[data-theme="dark"] #legend-side-menu .menu-category.active .menu-category-title,
html[data-theme="dark"] #legend-side-menu .lua-heartbeat-link:hover .menu-category-title,
html[data-theme="dark"] #legend-side-menu .lua-heartbeat-link.active .menu-category-title {
    background: #2e3844 !important;
    color: #e8edf3 !important;
}
html[data-theme="dark"] #legend-side-menu .submenu-popup {
    background: #1d232c !important;
    border: 1px solid #313b48 !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] #legend-side-menu .submenu-popup::before {
    background: #1d232c !important;
    border-left: 1px solid #313b48 !important;
    border-top: 1px solid #313b48 !important;
}
html[data-theme="dark"] #legend-side-menu .submenu-popup d-menu-item {
    color: #9aa4b1 !important;
    border-bottom-color: #2a333f !important;
    background: transparent !important;
}
html[data-theme="dark"] #legend-side-menu .submenu-popup d-menu-item:hover,
html[data-theme="dark"] #legend-side-menu .submenu-popup d-menu-item[active] {
    background: #D94F5C !important;
    border-bottom-color: #D94F5C !important;
    color: #fff !important;
}

/* ---------- 卡片 / 面板 / 盒子 ---------- */
html[data-theme="dark"] .card, html[data-theme="dark"] .box, html[data-theme="dark"] .panel,
html[data-theme="dark"] .notification, html[data-theme="dark"] .message,
html[data-theme="dark"] .menu-content, html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-card {
    background: #1d232c !important;
    color: #d5dbe2 !important;
    border-color: #313b48 !important;
}
html[data-theme="dark"] .card-header, html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .message-header, html[data-theme="dark"] .modal-card-head,
html[data-theme="dark"] .modal-card-foot {
    background: #1d232c !important;
    color: #d5dbe2 !important;
    border-color: #313b48 !important;
}
html[data-theme="dark"] .card-header-title,
html[data-theme="dark"] .title, html[data-theme="dark"] .subtitle {
    color: #e8edf3 !important;
}

/* ---------- 表格（light DOM 的 .table；组件内表格由 theme.js 注入覆盖） ---------- */
html[data-theme="dark"] .table {
    background: #1d232c !important;
    color: #d5dbe2 !important;
}
html[data-theme="dark"] .table th, html[data-theme="dark"] .table td {
    border-color: #313b48 !important;
    color: #d5dbe2 !important;
}
html[data-theme="dark"] .table thead th {
    background: #242c37 !important;
    color: #9aa4b1 !important;
}
html[data-theme="dark"] .table tbody tr:hover {
    background: #242c37 !important;
}
html[data-theme="dark"] .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background: #1a2028 !important;
}

/* ---------- 表单 ---------- */
html[data-theme="dark"] .input, html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select select, html[data-theme="dark"] .d-input input {
    background: #14181f !important;
    color: #d5dbe2 !important;
    border-color: #313b48 !important;
}
html[data-theme="dark"] .input::placeholder, html[data-theme="dark"] .textarea::placeholder {
    color: #6b7684 !important;
}
html[data-theme="dark"] .label {
    color: #9aa4b1 !important;
}

/* ---------- 按钮（品牌色保持） ---------- */
html[data-theme="dark"] .button {
    background: #242c37 !important;
    color: #d5dbe2 !important;
    border-color: #313b48 !important;
}
html[data-theme="dark"] .button.is-primary {
    background: #D94F5C !important;
    color: #fff !important;
    border-color: #D94F5C !important;
}
html[data-theme="dark"] .button.is-danger {
    background: #C4454F !important;
    color: #fff !important;
    border-color: #C4454F !important;
}
html[data-theme="dark"] .button.is-success {
    background: #11C1F4 !important;
    color: #fff !important;
    border-color: #11C1F4 !important;
}

/* ---------- 标签 / 页签 / 分页 / 面包屑 ---------- */
html[data-theme="dark"] .tag {
    background: #242c37 !important;
    color: #d5dbe2 !important;
}
html[data-theme="dark"] .tag.is-primary { background: #D94F5C !important; color: #fff !important; }
html[data-theme="dark"] .tag.is-success { background: #11C1F4 !important; color: #fff !important; }
html[data-theme="dark"] .tag.is-danger { background: #C4454F !important; color: #fff !important; }

html[data-theme="dark"] .tabs a {
    color: #9aa4b1 !important;
    border-color: #313b48 !important;
}
html[data-theme="dark"] .tabs a:hover {
    color: #e8edf3 !important;
    border-color: #D94F5C !important;
}
html[data-theme="dark"] .tabs li.is-active a {
    color: #D94F5C !important;
    border-color: #D94F5C !important;
}

html[data-theme="dark"] .pagination-link, html[data-theme="dark"] .pagination-previous,
html[data-theme="dark"] .pagination-next {
    background: #242c37 !important;
    color: #d5dbe2 !important;
    border-color: #313b48 !important;
}
html[data-theme="dark"] .pagination-link.is-current {
    background: #D94F5C !important;
    color: #fff !important;
    border-color: #D94F5C !important;
}

html[data-theme="dark"] .breadcrumb a {
    color: #D94F5C !important;
}
html[data-theme="dark"] .breadcrumb li.is-active a {
    color: #9aa4b1 !important;
}

/* ---------- 弹窗 / 下拉 / 页脚 / 分隔线 ---------- */
html[data-theme="dark"] .modal-background {
    background: rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .modal-card-title {
    color: #e8edf3 !important;
}
html[data-theme="dark"] .dropdown-content {
    background: #1d232c !important;
    border-color: #313b48 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .dropdown-item {
    color: #d5dbe2 !important;
}
html[data-theme="dark"] .dropdown-item:hover {
    background: #2e3844 !important;
    color: #e8edf3 !important;
}
html[data-theme="dark"] .footer {
    background: #1a2028 !important;
    color: #9aa4b1 !important;
}
html[data-theme="dark"] .hr, html[data-theme="dark"] hr {
    background: #313b48 !important;
}

/* ---------- 页头 / Hero（对应米色主题的强制覆盖） ---------- */
html[data-theme="dark"] .hero, html[data-theme="dark"] .hero-body,
html[data-theme="dark"] .page-header, html[data-theme="dark"] d-page-header,
html[data-theme="dark"] [d-page-header], html[data-theme="dark"] [class*="page-header"],
html[data-theme="dark"] [class*="hero"],
html[data-theme="dark"] .box-header, html[data-theme="dark"] .panel-block,
html[data-theme="dark"] .panel-tabs,
html[data-theme="dark"] .section-header, html[data-theme="dark"] .content-header,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .subtitle.is-4, html[data-theme="dark"] .title.is-4 {
    background: #1d232c !important;
    color: #d5dbe2 !important;
    border-color: #313b48 !important;
}

/* 对应米色主题“兜底把深色背景改成米色”的规则：深色模式下统一为面板色 */
html[data-theme="dark"] #page-main > div > div:first-child[style*="background"],
html[data-theme="dark"] #page-main .hero,
html[data-theme="dark"] #page-main [style*="background-color: rgb(54"],
html[data-theme="dark"] #page-main [style*="background-color: #3"],
html[data-theme="dark"] #page-main [style*="background-color: rgb(30"],
html[data-theme="dark"] #page-main [style*="background-color: rgb(40"],
html[data-theme="dark"] #page-main [style*="background: rgb(54"],
html[data-theme="dark"] #page-main [style*="background: #3"],
html[data-theme="dark"] #page-main [class*="dark"],
html[data-theme="dark"] #page-main [class*="purple"],
html[data-theme="dark"] #page-main [class*="navy"] {
    background: #1d232c !important;
    color: #d5dbe2 !important;
}

/* 对应米色主题“强制正文文字颜色”的规则 */
html[data-theme="dark"] #page-main h1, html[data-theme="dark"] #page-main h2,
html[data-theme="dark"] #page-main h3, html[data-theme="dark"] #page-main h4,
html[data-theme="dark"] #page-main h5, html[data-theme="dark"] #page-main h6,
html[data-theme="dark"] #page-main p, html[data-theme="dark"] #page-main span,
html[data-theme="dark"] #page-main div, html[data-theme="dark"] #page-main label,
html[data-theme="dark"] #page-main .title, html[data-theme="dark"] #page-main .subtitle {
    color: #d5dbe2 !important;
}

/* ---------- 主题切换按钮 ---------- */
html[data-theme="dark"] [data-theme-toggle] {
    color: #d5dbe2 !important;
}

/* ---------- 滚动条 ---------- */
html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #14181f; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #313b48; border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #465264; }

/* ---------- 移动端抽屉菜单 ---------- */
@media screen and (max-width: 1023px) {
    html[data-theme="dark"] #legend-side-menu {
        background: #1a2028 !important;
        border-right: 1px solid #2e3844 !important;
        border-bottom: none !important;
    }
    html[data-theme="dark"] #legend-side-menu .menu-category.has-children > .menu-category-title::after {
        border-right-color: #9aa4b1 !important;
        border-bottom-color: #9aa4b1 !important;
    }
}