/*
 * 海豹后台全局深浅色主题。
 * 默认页面保持原有浅色样式；深色模式只覆盖界面中性的背景、边框和文字，
 * 不改动按钮、徽章、提醒等业务状态颜色。
 */

:root {
    color-scheme: light;
}

html[data-haibao-theme="dark"] {
    color-scheme: dark;
    --hb-bg: #101418;
    --hb-surface: #171d23;
    --hb-surface-raised: #1d252d;
    --hb-surface-hover: #25313a;
    --hb-border: #34414c;
    --hb-text: #e6edf3;
    --hb-text-secondary: #aebbc6;
    --hb-text-muted: #82909c;
    --hb-input: #11171c;
    --hb-accent: #35b7a5;
    --hb-accent-soft: rgba(53, 183, 165, 0.18);
    --hb-shadow: rgba(0, 0, 0, 0.38);
}

html[data-haibao-theme="dark"],
html[data-haibao-theme="dark"] body {
    background: var(--hb-bg) !important;
    color: var(--hb-text);
}

html[data-haibao-theme="dark"] body,
html[data-haibao-theme="dark"] .layui-layout,
html[data-haibao-theme="dark"] .layui-body,
html[data-haibao-theme="dark"] .layui-tab-content,
html[data-haibao-theme="dark"] .layui-tab-item {
    scrollbar-color: var(--hb-border) var(--hb-bg);
}

html[data-haibao-theme="dark"] ::selection {
    background: var(--hb-accent-soft);
    color: #fff;
}

/* 首页外层面板原本写死为浅灰色，深色模式下去掉这层浅色底板。 */
html[data-haibao-theme="dark"] #app > .panel {
    background-color: var(--hb-bg) !important;
}

/* 主框架、标签页和导航 */
html[data-haibao-theme="dark"] .layui-layout-admin .layui-header,
html[data-haibao-theme="dark"] .layui-layout-admin .layui-side,
html[data-haibao-theme="dark"] .layui-side .layui-nav {
    background-color: #102a2b;
}

html[data-haibao-theme="dark"] .layui-tab,
html[data-haibao-theme="dark"] .layui-tab-card,
html[data-haibao-theme="dark"] .layui-tab-content,
html[data-haibao-theme="dark"] .layui-tab-title,
html[data-haibao-theme="dark"] .layui-nav-child {
    background: var(--hb-surface) !important;
    border-color: var(--hb-border) !important;
}

html[data-haibao-theme="dark"] .layui-tab-title li,
html[data-haibao-theme="dark"] .layui-tab-title li .layui-tab-close,
html[data-haibao-theme="dark"] .layui-nav-child a,
html[data-haibao-theme="dark"] .layui-nav .layui-nav-item a {
    color: var(--hb-text-secondary);
}

html[data-haibao-theme="dark"] .layui-tab-title .layui-this,
html[data-haibao-theme="dark"] .layui-tab-title .layui-this .layui-tab-close,
html[data-haibao-theme="dark"] .layui-nav-child a:hover {
    color: var(--hb-text) !important;
    background-color: var(--hb-surface-hover);
}

html[data-haibao-theme="dark"] .layui-tab-title .layui-this:after {
    border-color: var(--hb-accent) var(--hb-border) transparent;
}

/* 卡片、面板和常见的硬编码白色容器 */
html[data-haibao-theme="dark"] .layui-card,
html[data-haibao-theme="dark"] .layui-card-header,
html[data-haibao-theme="dark"] .layui-card-body,
html[data-haibao-theme="dark"] .layui-panel,
html[data-haibao-theme="dark"] .layui-collapse,
html[data-haibao-theme="dark"] .layui-colla-item,
html[data-haibao-theme="dark"] .layui-colla-title,
html[data-haibao-theme="dark"] .layui-colla-content,
html[data-haibao-theme="dark"] [style*="background-color: white"],
html[data-haibao-theme="dark"] [style*="background-color:white"],
html[data-haibao-theme="dark"] [style*="background-color: #fff" i],
html[data-haibao-theme="dark"] [style*="background-color:#fff" i],
html[data-haibao-theme="dark"] [style*="background: #fff" i],
html[data-haibao-theme="dark"] [style*="background:#fff" i] {
    background-color: var(--hb-surface) !important;
    border-color: var(--hb-border) !important;
    color: var(--hb-text);
}

html[data-haibao-theme="dark"] .layui-card-header,
html[data-haibao-theme="dark"] .layui-colla-title {
    color: var(--hb-text);
}

/* 表格 */
html[data-haibao-theme="dark"] .layui-table,
html[data-haibao-theme="dark"] .layui-table-view,
html[data-haibao-theme="dark"] .layui-table-box,
html[data-haibao-theme="dark"] .layui-table-header,
html[data-haibao-theme="dark"] .layui-table-body,
html[data-haibao-theme="dark"] .layui-table-main,
html[data-haibao-theme="dark"] .layui-table-page,
html[data-haibao-theme="dark"] .layui-table-tool,
html[data-haibao-theme="dark"] .layui-table-total,
html[data-haibao-theme="dark"] .layui-table-fixed,
html[data-haibao-theme="dark"] .layui-table-fixed-r,
html[data-haibao-theme="dark"] .layui-table-fixed-l,
html[data-haibao-theme="dark"] .layui-table tbody tr,
html[data-haibao-theme="dark"] .layui-table thead tr,
html[data-haibao-theme="dark"] .layui-table th,
html[data-haibao-theme="dark"] .layui-table td {
    background-color: var(--hb-surface) !important;
    border-color: var(--hb-border) !important;
    color: var(--hb-text) !important;
}

html[data-haibao-theme="dark"] .layui-table-hover,
html[data-haibao-theme="dark"] .layui-table tbody tr:hover,
html[data-haibao-theme="dark"] .layui-table-click {
    background-color: var(--hb-surface-hover) !important;
}

html[data-haibao-theme="dark"] .layui-table-sort .layui-edge {
    border-bottom-color: var(--hb-text-muted);
    border-top-color: var(--hb-text-muted);
}

/* 输入控件 */
html[data-haibao-theme="dark"] .layui-input,
html[data-haibao-theme="dark"] .layui-textarea,
html[data-haibao-theme="dark"] .layui-select,
html[data-haibao-theme="dark"] select,
html[data-haibao-theme="dark"] textarea,
html[data-haibao-theme="dark"] input[type="text"],
html[data-haibao-theme="dark"] input[type="password"],
html[data-haibao-theme="dark"] input[type="number"],
html[data-haibao-theme="dark"] input[type="search"],
html[data-haibao-theme="dark"] input[type="date"],
html[data-haibao-theme="dark"] input[type="datetime-local"] {
    background-color: var(--hb-input) !important;
    border-color: var(--hb-border) !important;
    color: var(--hb-text) !important;
}

html[data-haibao-theme="dark"] input::placeholder,
html[data-haibao-theme="dark"] textarea::placeholder {
    color: var(--hb-text-muted) !important;
}

html[data-haibao-theme="dark"] .layui-form-select dl,
html[data-haibao-theme="dark"] .layui-form-select dl dd,
html[data-haibao-theme="dark"] .layui-form-select dl dt {
    background: var(--hb-surface-raised);
    color: var(--hb-text-secondary);
    border-color: var(--hb-border);
}

html[data-haibao-theme="dark"] .layui-form-select dl dd:hover,
html[data-haibao-theme="dark"] .layui-form-select dl dd.layui-this {
    background-color: var(--hb-surface-hover);
    color: var(--hb-text);
}

html[data-haibao-theme="dark"] .layui-form-label,
html[data-haibao-theme="dark"] .layui-form-mid,
html[data-haibao-theme="dark"] label {
    color: var(--hb-text-secondary);
}

html[data-haibao-theme="dark"] .layui-form-checkbox[lay-skin="primary"] span,
html[data-haibao-theme="dark"] .layui-form-radio * {
    color: var(--hb-text-secondary);
}

/* 深色模式下统一降低原生方形勾选框的亮度，避免浏览器默认白底刺眼。 */
html[data-haibao-theme="dark"] input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box;
    position: relative;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    margin: 0 3px;
    border: 1px solid #87919a !important;
    border-radius: 2px;
    background-color: #68737d !important;
    vertical-align: middle;
    cursor: pointer;
}

html[data-haibao-theme="dark"] input[type="checkbox"]:checked {
    border-color: #98a2aa !important;
    background-color: #59646e !important;
}

html[data-haibao-theme="dark"] input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 0;
    left: 3px;
    width: 4px;
    height: 8px;
    border: solid #f2f5f7;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

html[data-haibao-theme="dark"] input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Layui 会把部分原生勾选框替换为自己的方框，这里保持同一套灰色视觉。 */
html[data-haibao-theme="dark"] .layui-form-checkbox[lay-skin="primary"] i {
    border-color: #87919a !important;
    background-color: #68737d !important;
    color: transparent !important;
}

html[data-haibao-theme="dark"] .layui-form-checked[lay-skin="primary"] i {
    border-color: #98a2aa !important;
    background-color: #59646e !important;
    color: #f2f5f7 !important;
}

/* 首页 14 天对比预警：深色模式使用文字色，不再铺大面积高亮底色。 */
html[data-haibao-theme="dark"] .owner-performance-table td.owner-performance-alert-yellow {
    background-color: transparent !important;
    color: #ffd43b !important;
    font-weight: 600;
}

html[data-haibao-theme="dark"] .owner-performance-table td.owner-performance-alert-red {
    background-color: transparent !important;
    color: #ff6b6b !important;
    font-weight: 600;
}

html[data-haibao-theme="dark"] .layui-btn-primary {
    background-color: var(--hb-surface-raised) !important;
    border-color: var(--hb-border) !important;
    color: var(--hb-text-secondary) !important;
}

html[data-haibao-theme="dark"] .layui-btn-primary:hover {
    border-color: var(--hb-accent) !important;
    color: var(--hb-text) !important;
}

html[data-haibao-theme="dark"] .layui-btn-disabled,
html[data-haibao-theme="dark"] .layui-btn-disabled:hover {
    background-color: var(--hb-surface) !important;
    border-color: var(--hb-border) !important;
    color: var(--hb-text-muted) !important;
}

/* 弹窗、日期、下拉和提示 */
html[data-haibao-theme="dark"] .layui-layer,
html[data-haibao-theme="dark"] .layui-layer-title,
html[data-haibao-theme="dark"] .layui-layer-content,
html[data-haibao-theme="dark"] .layui-layer-btn,
html[data-haibao-theme="dark"] .layui-laydate,
html[data-haibao-theme="dark"] .layui-laydate-header,
html[data-haibao-theme="dark"] .layui-laydate-content,
html[data-haibao-theme="dark"] .layui-laydate-footer,
html[data-haibao-theme="dark"] .layui-dropdown-menu,
html[data-haibao-theme="dark"] .layui-menu {
    background: var(--hb-surface-raised) !important;
    border-color: var(--hb-border) !important;
    color: var(--hb-text) !important;
    box-shadow: 0 8px 28px var(--hb-shadow);
}

html[data-haibao-theme="dark"] .layui-layer-title,
html[data-haibao-theme="dark"] .layui-layer-btn,
html[data-haibao-theme="dark"] .layui-laydate-header,
html[data-haibao-theme="dark"] .layui-laydate-footer {
    border-color: var(--hb-border) !important;
}

html[data-haibao-theme="dark"] .layui-layer-btn a,
html[data-haibao-theme="dark"] .layui-laydate-content th,
html[data-haibao-theme="dark"] .layui-laydate-content td,
html[data-haibao-theme="dark"] .layui-laydate-header i,
html[data-haibao-theme="dark"] .layui-laydate-header span {
    color: var(--hb-text-secondary);
}

html[data-haibao-theme="dark"] .layui-layer-btn .layui-layer-btn0 {
    color: #fff;
}

/* 分页、树形、上传、进度及其他 Layui 中性组件 */
html[data-haibao-theme="dark"] .layui-laypage a,
html[data-haibao-theme="dark"] .layui-laypage span,
html[data-haibao-theme="dark"] .layui-laypage input,
html[data-haibao-theme="dark"] .layui-laypage button,
html[data-haibao-theme="dark"] .layui-tree-entry,
html[data-haibao-theme="dark"] .layui-tree-txt,
html[data-haibao-theme="dark"] .layui-upload-drag,
html[data-haibao-theme="dark"] .layui-quote-nm,
html[data-haibao-theme="dark"] .layui-field-box,
html[data-haibao-theme="dark"] fieldset,
html[data-haibao-theme="dark"] legend {
    background-color: var(--hb-surface) !important;
    border-color: var(--hb-border) !important;
    color: var(--hb-text-secondary) !important;
}

html[data-haibao-theme="dark"] .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: var(--hb-accent);
}

html[data-haibao-theme="dark"] hr,
html[data-haibao-theme="dark"] .layui-border-box,
html[data-haibao-theme="dark"] .layui-form-pane .layui-form-label {
    border-color: var(--hb-border) !important;
}

html[data-haibao-theme="dark"] a:not(.layui-btn):not(.layui-badge) {
    color: #79c8ff;
}

html[data-haibao-theme="dark"] .layui-nav a,
html[data-haibao-theme="dark"] .layui-tab-title li {
    color: var(--hb-text-secondary);
}

html[data-haibao-theme="dark"] pre,
html[data-haibao-theme="dark"] code {
    background: var(--hb-input);
    color: var(--hb-text-secondary);
    border-color: var(--hb-border);
}

/* 主题选择菜单 */
.haibao-theme-menu .haibao-theme-choice.is-active {
    color: #35b7a5 !important;
    font-weight: 600;
}

.haibao-theme-menu .haibao-theme-check {
    display: inline-block;
    width: 18px;
    margin-right: 4px;
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    html,
    body,
    .layui-card,
    .layui-table,
    .layui-input,
    .layui-textarea,
    .layui-tab-title,
    .layui-layer {
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    }
}