/* ============================================================
   James.Cai 共享暗色主题 v1
   覆盖所有子应用的公共 UI 元素
   主题切换：html[data-theme="dark"]（藏青）/ html[data-theme="dark2"]（狼灰）
   ============================================================ */

/* ---- CSS 变量定义 ---- */
:root {
  --jc-bg: #f5f7fa;
  --jc-card: #ffffff;
  --jc-text: #1f2d3d;
  --jc-muted: #6b7a8c;
  --jc-line: #d9e2ec;
  --jc-blue: #0a6ed1;
  --jc-blue-light: #eef6ff;
  --jc-green: #2e7d32;
  --jc-red: #dc2626;
}

html[data-theme="dark"] {
  --jc-bg: #07111f;
  --jc-card: #0f1f33;
  --jc-text: #e5eefb;
  --jc-muted: #a8c7e8;
  --jc-line: #233d5f;
  --jc-blue: #4aa3ff;
  --jc-blue-light: #15365a;
  --jc-green: #78d98a;
  --jc-red: #ff7b8c;
  color-scheme: dark;
}

html[data-theme="dark2"] {
  --jc-bg: #0d1117;
  --jc-card: #161b22;
  --jc-text: #c9d1d9;
  --jc-muted: #8b949e;
  --jc-line: #30363d;
  --jc-blue: #58a6ff;
  --jc-blue-light: #1f334a;
  --jc-green: #7ee787;
  --jc-red: #ff9baa;
  color-scheme: dark;
}
/* ---- 兼容各页面本地 CSS 变量（var(--card) 等） ---- */
html[data-theme="dark"],
html[data-theme="dark2"] {
  --bg: var(--jc-bg);
  --card: var(--jc-card);
  --text: var(--jc-text);
  --muted: var(--jc-muted);
  --line: var(--jc-line);
  --blue: var(--jc-blue);
  --dark: #223548;
  --nav: var(--jc-card);
  --shadow: 0 8px 24px rgba(0,0,0,.3);
  --danger: #ff7b8c;
  --ok: #78d98a;
  --warn: #f0c36d;
  --bad: #ff7b8c;
  --green: #78d98a;
}


/* ---- 基础页面 ---- */
html[data-theme="dark"] body,
html[data-theme="dark2"] body,
html[data-theme="dark"] main,
html[data-theme="dark2"] main,
html[data-theme="dark"] .wrap,
html[data-theme="dark2"] .wrap,
html[data-theme="dark"] .content,
html[data-theme="dark2"] .content,
html[data-theme="dark"] .page,
html[data-theme="dark2"] .page,
html[data-theme="dark"] .container,
html[data-theme="dark2"] .container {
  background: var(--jc-bg) !important;
  color: var(--jc-text) !important;
}

/* ---- 卡片 / 面板 / 区块 ---- */
html[data-theme="dark"] .card,
html[data-theme="dark2"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark2"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark2"] .box,
html[data-theme="dark"] .tile,
html[data-theme="dark2"] .tile,
html[data-theme="dark"] .section,
html[data-theme="dark2"] .section,
html[data-theme="dark"] .hero,
html[data-theme="dark2"] .hero,
html[data-theme="dark"] .empty,
html[data-theme="dark2"] .empty,
html[data-theme="dark"] .item,
html[data-theme="dark2"] .item,
html[data-theme="dark"] .notice,
html[data-theme="dark2"] .notice,
html[data-theme="dark"] .alert,
html[data-theme="dark2"] .alert,
html[data-theme="dark"] .status-card,
html[data-theme="dark2"] .status-card {
  background: var(--jc-card) !important;
  color: var(--jc-text) !important;
  border-color: var(--jc-line) !important;
}

html[data-theme="dark"] .hero,
html[data-theme="dark2"] .hero {
  background: var(--jc-card) !important;
}

/* ---- 页眉 / 导航 ---- */
html[data-theme="dark"] .top,
html[data-theme="dark2"] .top,
html[data-theme="dark"] .navbar,
html[data-theme="dark2"] .navbar,
html[data-theme="dark"] header,
html[data-theme="dark2"] header,
html[data-theme="dark"] .shell-bar,
html[data-theme="dark2"] .shell-bar,
html[data-theme="dark"] .app-header,
html[data-theme="dark2"] .app-header {
  background: linear-gradient(90deg, var(--jc-bg), var(--jc-card)) !important;
  color: var(--jc-text) !important;
  border-color: var(--jc-line) !important;
}

/* ---- 侧边栏 ---- */
html[data-theme="dark"] .sidebar,
html[data-theme="dark2"] .sidebar,
html[data-theme="dark"] nav.sidebar,
html[data-theme="dark2"] nav.sidebar,
html[data-theme="dark"] .am-sidebar,
html[data-theme="dark2"] .am-sidebar {
  background: var(--jc-bg) !important;
  color: var(--jc-text) !important;
  border-color: var(--jc-line) !important;
}

/* ---- 表格 ---- */
html[data-theme="dark"] table,
html[data-theme="dark2"] table,
html[data-theme="dark"] .table,
html[data-theme="dark2"] .table,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark2"] .table-wrap {
  background: var(--jc-card) !important;
  color: var(--jc-text) !important;
  border-color: var(--jc-line) !important;
}

html[data-theme="dark"] th,
html[data-theme="dark2"] th,
html[data-theme="dark"] thead td,
html[data-theme="dark2"] thead td {
  background: rgba(255,255,255,.04) !important;
  color: var(--jc-text) !important;
  border-color: var(--jc-line) !important;
}

html[data-theme="dark"] td,
html[data-theme="dark2"] td {
  background: transparent !important;
  color: var(--jc-text) !important;
  border-color: var(--jc-line) !important;
}

html[data-theme="dark"] tr:hover td,
html[data-theme="dark2"] tr:hover td {
  background: rgba(255,255,255,.03) !important;
}

html[data-theme="dark"] tr:nth-child(even) td,
html[data-theme="dark2"] tr:nth-child(even) td {
  background: rgba(255,255,255,.01) !important;
}

/* ---- 表单 ---- */
html[data-theme="dark"] input,
html[data-theme="dark2"] input,
html[data-theme="dark"] select,
html[data-theme="dark2"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark2"] textarea {
  background: rgba(0,0,0,.25) !important;
  color: var(--jc-text) !important;
  border-color: var(--jc-line) !important;
}

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

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark2"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark2"] textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--jc-bg) inset !important;
  -webkit-text-fill-color: var(--jc-text) !important;
}

/* ---- 按钮 ---- */
html[data-theme="dark"] button:not(.jc-theme-toggle):not(.primary),
html[data-theme="dark2"] button:not(.jc-theme-toggle):not(.primary),
html[data-theme="dark"] .btn:not(.primary),
html[data-theme="dark2"] .btn:not(.primary),
html[data-theme="dark"] .am-btn,
html[data-theme="dark2"] .am-btn {
  background: var(--jc-card) !important;
  color: var(--jc-text) !important;
  border-color: var(--jc-line) !important;
}

html[data-theme="dark"] button:hover:not(.jc-theme-toggle),
html[data-theme="dark2"] button:hover:not(.jc-theme-toggle),
html[data-theme="dark"] .btn:hover,
html[data-theme="dark2"] .btn:hover,
html[data-theme="dark"] .am-btn:hover,
html[data-theme="dark2"] .am-btn:hover {
  background: rgba(255,255,255,.08) !important;
}

/* ---- 文字 ---- */
html[data-theme="dark"] h1,
html[data-theme="dark2"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark2"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark2"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark2"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark2"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark2"] h6,
html[data-theme="dark"] .title,
html[data-theme="dark2"] .title,
html[data-theme="dark"] .name,
html[data-theme="dark2"] .name,
html[data-theme="dark"] .brand-title,
html[data-theme="dark2"] .brand-title,
html[data-theme="dark"] label,
html[data-theme="dark2"] label,
html[data-theme="dark"] b,
html[data-theme="dark2"] b,
html[data-theme="dark"] strong,
html[data-theme="dark2"] strong {
  color: var(--jc-text) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark2"] p,
html[data-theme="dark"] li,
html[data-theme="dark2"] li,
html[data-theme="dark"] span,
html[data-theme="dark2"] span,
html[data-theme="dark"] div,
html[data-theme="dark2"] div {
  color: inherit;
}

html[data-theme="dark"] .muted,
html[data-theme="dark2"] .muted,
html[data-theme="dark"] .small,
html[data-theme="dark2"] .small,
html[data-theme="dark"] .hint,
html[data-theme="dark2"] .hint,
html[data-theme="dark"] .help,
html[data-theme="dark2"] .help,
html[data-theme="dark"] .desc,
html[data-theme="dark2"] .desc,
html[data-theme="dark"] .subtitle,
html[data-theme="dark2"] .subtitle,
html[data-theme="dark"] .sub,
html[data-theme="dark2"] .sub,
html[data-theme="dark"] .role,
html[data-theme="dark2"] .role,
html[data-theme="dark"] .brand-sub,
html[data-theme="dark2"] .brand-sub {
  color: var(--jc-muted) !important;
}

/* ---- 链接 ---- */
html[data-theme="dark"] a,
html[data-theme="dark2"] a {
  color: var(--jc-blue) !important;
}

/* ---- 标签 / 徽章 ---- */
html[data-theme="dark"] .badge,
html[data-theme="dark2"] .badge,
html[data-theme="dark"] .tag,
html[data-theme="dark2"] .tag,
html[data-theme="dark"] .pill,
html[data-theme="dark2"] .pill,
html[data-theme="dark"] .role-pill,
html[data-theme="dark2"] .role-pill,
html[data-theme="dark"] .status,
html[data-theme="dark2"] .status {
  background: var(--jc-blue-light) !important;
  color: var(--jc-blue) !important;
  border-color: var(--jc-line) !important;
}

/* ---- 图标容器 ---- */
html[data-theme="dark"] .icon,
html[data-theme="dark2"] .icon {
  background: var(--jc-blue-light) !important;
}

/* ---- 进度条 ---- */
html[data-theme="dark"] .progress,
html[data-theme="dark2"] .progress {
  background: var(--jc-line) !important;
}

/* ---- 分割线 ---- */
html[data-theme="dark"] hr,
html[data-theme="dark2"] hr,
html[data-theme="dark"] .divider,
html[data-theme="dark2"] .divider {
  border-color: var(--jc-line) !important;
}

/* ---- 下拉菜单 ---- */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark2"] .dropdown-menu,
html[data-theme="dark"] .app-menu,
html[data-theme="dark2"] .app-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark2"] .modal-content {
  background: var(--jc-card) !important;
  color: var(--jc-text) !important;
  border-color: var(--jc-line) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.4) !important;
}

html[data-theme="dark"] .app-menu a,
html[data-theme="dark2"] .app-menu a {
  color: var(--jc-text) !important;
}

html[data-theme="dark"] .app-menu a:hover,
html[data-theme="dark2"] .app-menu a:hover {
  background: rgba(255,255,255,.06) !important;
}

/* ---- 页脚 ---- */
html[data-theme="dark"] .site-footer,
html[data-theme="dark2"] .site-footer,
html[data-theme="dark"] footer,
html[data-theme="dark2"] footer {
  color: var(--jc-muted) !important;
}

html[data-theme="dark"] .site-footer a,
html[data-theme="dark2"] .site-footer a,
html[data-theme="dark"] footer a,
html[data-theme="dark2"] footer a {
  color: var(--jc-muted) !important;
}

/* ---- 拖拽高亮 ---- */
html[data-theme="dark"] .drag-over,
html[data-theme="dark2"] .drag-over,
html[data-theme="dark"] .item.drag-over,
html[data-theme="dark2"] .item.drag-over {
  border-color: var(--jc-blue) !important;
}

html[data-theme="dark"] .dragging,
html[data-theme="dark2"] .dragging {
  opacity: .45 !important;
}

/* ---- 拖拽手柄 ---- */
html[data-theme="dark"] .handle,
html[data-theme="dark2"] .handle {
  color: var(--jc-muted) !important;
}

/* ---- 次要按钮 ---- */
html[data-theme="dark"] .secondary,
html[data-theme="dark2"] .secondary {
  background: var(--jc-card) !important;
  color: var(--jc-text) !important;
  border: 1px solid var(--jc-line) !important;
}

/* ---- 排序锁定按钮 ---- */
html[data-theme="dark"] .lock-btn,
html[data-theme="dark2"] .lock-btn {
  background: var(--jc-card) !important;
  color: var(--jc-text) !important;
  border-color: var(--jc-line) !important;
}

/* ---- 卡片装饰条 ---- */
html[data-theme="dark"] .tile:before,
html[data-theme="dark2"] .tile:before {
  background: linear-gradient(90deg, var(--jc-blue), var(--jc-line)) !important;
}

/* ---- 英文名 ---- */
html[data-theme="dark"] .ename,
html[data-theme="dark2"] .ename {
  color: var(--jc-blue) !important;
}

/* ---- 页脚入口 ---- */
html[data-theme="dark"] .foot,
html[data-theme="dark2"] .foot {
  color: var(--jc-blue) !important;
}

/* ---- 提示横条 ---- */
html[data-theme="dark"] .eyebrow,
html[data-theme="dark2"] .eyebrow {
  color: var(--jc-blue) !important;
}

/* ---- 状态颜色保留 ---- */
html[data-theme="dark"] .status,
html[data-theme="dark2"] .status {
  color: var(--jc-green) !important;
}


/* ---- 暗色下文字可见性补丁 ---- */
html[data-theme="dark"] .brand,
html[data-theme="dark2"] .brand,
html[data-theme="dark"] h1,
html[data-theme="dark2"] h1 {
  color: var(--jc-text) !important;
}

html[data-theme="dark"] .tab,
html[data-theme="dark2"] .tab {
  color: var(--jc-text) !important;
}

html[data-theme="dark"] .tab.active,
html[data-theme="dark2"] .tab.active {
  background: var(--jc-blue) !important;
  color: #fff !important;
}

html[data-theme="dark"] .secondary-link,
html[data-theme="dark2"] .secondary-link {
  color: var(--jc-text) !important;
  background: var(--jc-card) !important;
}

html[data-theme="dark"] .switch,
html[data-theme="dark2"] .switch {
  color: var(--jc-muted) !important;
}

html[data-theme="dark"] .logs td,
html[data-theme="dark2"] .logs td {
  color: var(--jc-muted) !important;
}

html[data-theme="dark"] .status.off,
html[data-theme="dark2"] .status.off {
  color: var(--jc-muted) !important;
}

html[data-theme="dark"] pre,
html[data-theme="dark2"] pre {
  color: var(--jc-text) !important;
  background: var(--jc-card) !important;
  border-color: var(--jc-line) !important;
}

html[data-theme="dark"] .user-row.inactive,
html[data-theme="dark2"] .user-row.inactive {
  color: var(--jc-muted) !important;
  background: var(--jc-bg) !important;
}

html[data-theme="dark"] .metric,
html[data-theme="dark2"] .metric {
  color: var(--jc-text) !important;
}

/* admin page status badges dark mode fix */
html[data-theme="dark"] .status.ok,
html[data-theme="dark2"] .status.ok {
  background: rgba(120,217,138,.15) !important;
  color: var(--jc-green) !important;
}

html[data-theme="dark"] .status.admin,
html[data-theme="dark2"] .status.admin {
  background: rgba(240,195,109,.15) !important;
  color: var(--jc-warn, #f0c36d) !important;
}

html[data-theme="dark"] .status.off,
html[data-theme="dark2"] .status.off {
  background: rgba(255,255,255,.06) !important;
  color: var(--jc-muted) !important;
}

/* ops page status badges */
html[data-theme="dark"] .ok,
html[data-theme="dark2"] .ok {
  background: rgba(120,217,138,.15) !important;
}

html[data-theme="dark"] .bad,
html[data-theme="dark2"] .bad {
  background: rgba(255,123,140,.15) !important;
}

html[data-theme="dark"] .warn,
html[data-theme="dark2"] .warn {
  background: rgba(240,195,109,.15) !important;
}

/* preferences lock-btn unlocked state */
html[data-theme="dark"] .lock-btn.unlocked,
html[data-theme="dark2"] .lock-btn.unlocked {
  background: rgba(240,195,109,.12) !important;
  border-color: rgba(240,195,109,.4) !important;
  color: #f0c36d !important;
}

html[data-theme="dark"] .drag-mode .tile:after,
html[data-theme="dark2"] .drag-mode .tile:after {
  background: rgba(240,195,109,.12) !important;
  border-color: rgba(240,195,109,.4) !important;
  color: #f0c36d !important;
}


/* ---- 打印重置 ---- */
@media print {
  :root,
  html[data-theme="dark"],
  html[data-theme="dark2"] {
    color-scheme: light;
    --jc-bg: #fff;
    --jc-card: #fff;
    --jc-text: #000;
  }
  html[data-theme="dark"] body,
  html[data-theme="dark2"] body {
    background: white !important;
    color: black !important;
  }
}

/* ═══ 主题切换悬浮球（by theme.js mountToggle）═══ */
.jc-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  border: 1px solid rgba(125,190,255,.45);
  background: rgba(15,39,68,.92);
  color: #eef7ff;
  border-radius: 999px;
  min-width: 44px;
  height: 44px;
  padding: 0 13px;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  cursor: pointer;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  transition: filter .15s ease, transform .15s ease;
}
.jc-theme-toggle span {
  font-size: 12px;
  font-weight: 700;
}
.jc-theme-toggle:hover { filter: brightness(1.08); transform: translateY(-1px); }
.jc-theme-toggle:active { transform: translateY(0); }

/* light 时按钮呈"深色卡片"风格；dark/dark2 时反色 */
html[data-theme="dark"] .jc-theme-toggle,
html[data-theme="dark2"] .jc-theme-toggle {
  background: rgba(234,244,255,.96);
  color: #0b1d30;
  border-color: #b8d9ff;
}

@media (max-width: 640px) {
  .jc-theme-toggle {
    right: 12px;
    bottom: 12px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
  }
  .jc-theme-toggle span { display: none; }
}

@media print {
  .jc-theme-toggle { display: none !important; }
}