/* 产品矩阵通用界面。取值与 /opt/apps/kanban/dashboard/assets/style.css 对齐。
 * EnergyX 保留自身业务、图表配色和外观偏好；导航及基础设施组件共用 PowerX 规范。
 * 参考与差异见 docs/powerx-ui-alignment.md。 */
:root {
  --px-on-brand: var(--ink-on-brand); --px-bg: #f3f6fb; --px-panel: #fff; --px-panel-2: #f7f9fd; --px-line: #e5ebf3; --px-line-2: #d9e1ec;
  --px-text: var(--ink-main); --px-muted: var(--ink-secondary); --px-hover: #fafcff;
  --px-brand: var(--ink-brand); --px-brand-rgb: 49,95,195; --px-brand-soft: #edf2ff; --px-ok: var(--ink-down); --px-ok-soft: #edf9f1;
  --px-danger: var(--ink-error); --px-danger-soft: #fff1ee;
}
:root[data-theme="dark"] {
  --px-on-brand: var(--ink-on-brand); --px-bg: #0f151f; --px-panel: #161e2b; --px-panel-2: #1b2434; --px-line: #263349; --px-line-2: #2e3d57;
  --px-text: var(--ink-main); --px-muted: var(--ink-secondary); --px-hover: #1c2637;
  --px-brand: var(--ink-brand); --px-brand-rgb: 125,168,239; --px-brand-soft: rgba(62,112,242,.15); --px-ok: var(--ink-down); --px-ok-soft: rgba(34,178,104,.12);
  --px-danger: var(--ink-error); --px-danger-soft: rgba(226,90,79,.13);
}
/* 共享浮层沿用 PowerX 材质与正文色，品牌色由当前调色盘提供。 */
:is(.topbar, .sidebar, .menu, .modal, .toast, .du-progress, .admin-view) {
  --panel: var(--px-panel); --panel-2: var(--px-panel-2); --panel-3: var(--px-panel-2);
  --line: var(--px-line); --line-2: var(--px-line-2); --tx: var(--px-text); --tx-2: var(--px-muted); --tx-3: var(--px-muted);
  --pri: var(--px-brand); --pri-rgb: var(--px-brand-rgb); --pri-tx: var(--brand-ink); --pri-soft: var(--px-brand-soft); --tx-inv: var(--px-on-brand);
  --hover: var(--px-hover); --ok: var(--px-ok); --err: var(--px-danger); --blur: none;
}
/* 侧栏跟随统一宽度变量，二级保持纯文字。 */
.sidebar, [data-skin="glass"] .sidebar {
  top: 0; left: 0; bottom: 0; width: var(--sb-w); border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
  background: #10203a; --sb-tx: var(--ink-on-brand); --sb-tx-hi: var(--ink-on-brand); --sb-group: var(--ink-on-brand);
  --sb-hover: rgba(255,255,255,.08); --sb-line: rgba(255,255,255,.08); --sb-active: var(--px-brand);
}
.sidebar .nav-item { border-radius: var(--r-sm); }
.sidebar .nav-item.active, [data-skin] .sidebar .nav-item.active { background: var(--px-brand); color: var(--tx-inv); }
[data-skin] .sidebar .nav-item.active::before { content: none; }
.nav-ico { width: 18px; height: 20px; flex: none; display: inline-grid; place-items: center; font-size: var(--text-section); line-height: var(--leading-body); }
.nav-sub .nav-ico { display: none; }
[data-nav="mini"] .sidebar .nav-ico { font-size: var(--text-section); }
.topbar, [data-skin="glass"] .topbar {
  margin: 0; top: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--px-line);
  box-shadow: none; background: var(--px-bg); backdrop-filter: none;
}
.topbar .sb-toggle { display: grid; flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.topbar .crumb { border-left: 1px solid var(--line); padding-left: var(--space-12); font-size: var(--text-secondary); }
.topbar #data-refresh, .topbar #look-btn { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.topbar .user-chip { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: var(--space-4) var(--space-12) var(--space-4) var(--space-4); }
/* 公共操作、表单、弹窗与 PowerX modal-v2 采用同样的节奏。 */
.btn { border-radius: var(--r-sm); font-size: var(--text-body); }
.btn.primary { font-weight: 600; }
.input, .select { border-radius: var(--r-sm); }
.mask, [data-skin="glass"] .mask { background: rgba(10,20,38,.55); backdrop-filter: none; }
:root[data-theme] .mask .modal { width: min(460px, 100%); background: var(--px-panel); border-radius: var(--r-lg); backdrop-filter: none; box-shadow: 0 24px 60px rgba(8,20,40,.35); }
:root[data-theme] .mask .modal.wide { width: min(760px, 100%); }
.modal-h { padding: var(--space-20) var(--space-24) var(--space-16); align-items: flex-start; }
.modal-h h3 { font-size: var(--text-section); font-weight: 600; }
.modal-h .x { width: 28px; height: 28px; border-radius: 8px; }
.modal-b { padding: var(--space-12) var(--space-24); }
.modal-f { padding: var(--space-16) var(--space-24) var(--space-20); gap: var(--space-12); }
.modal .field > label { font-size: var(--text-caption); }
.modal .input, .modal .select { background: var(--panel); height: 42px; padding: 0 var(--space-12); font-size: var(--text-body); }
.modal textarea.input { height: auto; padding: var(--space-12) var(--space-12); }
.toast-box { top: 24px; }
.toast-box .toast { background: var(--px-panel); backdrop-filter: none; padding: var(--space-12) var(--space-20); font-size: var(--text-body); box-shadow: 0 8px 30px rgba(8,20,40,.18); }
/* 基础设施页统一实色工作区，避免玻璃壁纸干扰表格阅读。 */
body.admin-mode { background: var(--px-bg); }
body.admin-mode .backdrop { display: none; }
:root[data-theme] :is(.admin-view, body.admin-mode .modal, body.admin-mode .du-progress) {
  --admin-surface: var(--px-panel); --panel: var(--px-panel); --panel-2: var(--px-panel-2); --panel-3: var(--px-panel-2);
  --line: var(--px-line); --line-2: var(--px-line-2); --tx: var(--px-text); --tx-2: var(--px-muted); --tx-3: var(--px-muted);
  --pri: var(--px-brand); --pri-rgb: var(--px-brand-rgb); --pri-tx: var(--brand-ink); --pri-soft: var(--px-brand-soft); --tx-inv: var(--px-on-brand);
}
.view.admin-view { border-radius: var(--r); border: 1px solid var(--line); padding: var(--space-20); box-shadow: none; }
.admin-view .page-head { margin-bottom: var(--space-16); align-items: center; }
.admin-view .page-head .sub { display: none; }
.admin-view .page-head h1 { font-size: var(--text-page-title); }
.admin-view .table-wrap { border-radius: var(--r-sm); }
.admin-view .tbl { font-size: var(--text-secondary); }
.admin-view .tbl th, .admin-view .tbl td { padding: var(--space-8) var(--space-12); }
.admin-view .tbl th { background: var(--px-panel-2); font-size: var(--text-secondary); font-weight: 600; }
.admin-view .tbl th, .admin-view .tbl td { text-align: left; }
.admin-view .tbl :is(th, td):is(.r, .num, :last-child) { text-align: right; }
.admin-view .role-list .tbl td:nth-child(2) { text-align: left; }
.admin-view .tag { border-radius: 999px; padding: var(--space-4) var(--space-12); line-height: var(--leading-body); font-size: var(--text-caption); font-weight: 600; }
.admin-view .tag.ok { color: var(--tx-2); background: var(--panel-3); }
.admin-view .tag.off { color: var(--px-muted); background: var(--px-panel-2); }
.admin-view .role-type { color: var(--brand-ink); background: var(--px-brand-soft); font-size: var(--text-caption); }
.admin-view .input, .admin-view .select { background: var(--px-panel); }
.admin-view .btn { height: 38px; padding: 0 var(--space-16); }
.admin-view .user-list, .admin-view .role-list { display: flex; min-height: calc(100dvh - var(--top-h) - 130px); }
.admin-view :is(.user-list, .role-list) > .table-wrap { flex: 1; max-height: none; }
.settings-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); margin-top: var(--space-4); }
.settings-grid .field { margin: 0; }
.settings-grid .field > label { font-size: var(--text-caption); }
.settings-grid .input, .settings-grid .select { width: 100%; height: 42px; font-size: var(--text-body); padding: 0 var(--space-12); }
.settings-grid .help { font-size: var(--text-caption); color: var(--px-muted); }
.settings-actions { margin-top: var(--space-20); padding-top: var(--space-16); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.settings-actions .dim { font-size: var(--text-caption); }
.perm-master-row { display: flex; justify-content: space-between; gap: var(--space-12); border-bottom: 1px solid var(--line); padding: var(--space-4) 0 var(--space-12); margin-bottom: var(--space-12); }
.perm-master-row .dim { font-size: var(--text-caption); }
.modal .perm-tree { display: flex; flex-direction: column; gap: var(--space-12); }
.modal .perm-node { border: 1px solid var(--line); border-radius: 8px; padding: 0; overflow: hidden; }
.modal .perm-node > .check { display: flex; background: var(--pri-soft); padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--line); font-weight: 600; }
.modal .perm-kids { padding: var(--space-12) var(--space-16); margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); }
.modal .perm-kids .check { min-width: 120px; }
@media (max-width: 1100px) { .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .view.admin-view { padding: var(--space-16); }
  .admin-view .page-head { align-items: flex-start; }
  .topbar .crumb { padding-left: var(--space-8); }
}
@media (max-width: 560px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .modal-h, .modal-b, .modal-f { padding-left: var(--space-20); padding-right: var(--space-20); }
  .admin-view .user-list, .admin-view .role-list { min-height: calc(100dvh - var(--top-h) - 200px); }
}

.table-action { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.integration-url { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* PowerX 原版导航折叠图标；用 mask 保持随主题着色。 */
.menu-fold-icon { width: 19px; height: 19px; background: currentColor; mask: url(/img/menu-fold.svg) center / contain no-repeat; -webkit-mask: url(/img/menu-fold.svg) center / contain no-repeat; transition: transform .25s ease; }
[data-nav="mini"] .menu-fold-icon { transform: scaleX(-1); }
.modal .perm-tree { columns: auto; }
.modal .perm-node { margin-bottom: 0; }
.modal .perm-kids { flex-direction: row; }
:root[data-theme] .menu { background: var(--px-panel); backdrop-filter: none; border-radius: var(--r); }

/* 首页时间工具栏：与 PowerX 的区间条同样紧凑，说明收进提示，不占独立标题行。 */
:is(#home-time, .market-view .module-window) {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8) var(--space-12);
  padding: var(--space-8) 0; margin: 0 0 var(--space-12); top: var(--top-h);
  border: 0; border-bottom: 1px solid var(--px-line); border-radius: 0;
  background: var(--px-bg); box-shadow: none; backdrop-filter: none;
  color: var(--px-muted); font-size: var(--text-caption);
}
.home-time-label { display: inline-flex; align-items: center; gap: var(--space-4); white-space: nowrap; }
.home-time-info { color: var(--px-muted); cursor: help; font-size: var(--text-caption); }
:is(#home-time, .market-view .module-window) .module-time { width: auto; padding: 0; gap: var(--space-8); }
:is(#home-time, .market-view .module-window) .seg { padding: 0; gap: var(--space-4); border-radius: 0; background: transparent; }
:is(#home-time, .market-view .module-window) .seg button { height: 30px; padding: 0 var(--space-12); border: 1px solid var(--px-line); border-radius: 4px; background: var(--px-panel); color: var(--px-muted); font-size: var(--text-caption); }
:is(#home-time, .market-view .module-window) .seg button.on { background: var(--px-brand); color: var(--tx-inv); border-color: var(--px-brand); box-shadow: none; }
:is(#home-time, .market-view .module-window) .dates { gap: var(--space-8); }
:is(#home-time, .market-view .module-window) .dates input { width: 128px; height: 30px; padding: 0 var(--space-8); font-size: var(--text-caption); color: var(--px-text); background: var(--px-panel); border-color: var(--px-line-2); border-radius: var(--r-sm); }
:is(#home-time, .market-view .module-window) .steps .btn { height: 30px; padding: 0 var(--space-8); border-radius: var(--r-sm); border-color: var(--px-line-2); background: var(--px-panel); color: var(--px-text); font-size: var(--text-caption); }
@media (max-width: 900px) {
  .sidebar, [data-skin="glass"] .sidebar { bottom: var(--tabbar-h); }
  /* 手机和窄窗口以阅读图表为主，时间条随页面滚走，避免多行控件吸顶遮挡。 */
  :is(#home-time, .market-view .module-window) { position: static; }
  :is(#home-time, .market-view .module-window) .module-time { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  :is(#home-time, .market-view .module-window) { gap: var(--space-4); padding: var(--space-8) 0; }
  :is(#home-time, .market-view .module-window) .seg { flex-wrap: wrap; }
  :is(#home-time, .market-view .module-window) .seg button { padding: 0 var(--space-8); }
}

/* 导航层级沿用 PowerX 的左侧树线和分组留白；二级菜单继续使用纯文字。 */
/* 2026-11-13：nav-sec 自身 4px + 内部 nav-item 上下 4px 叠加，一级模块间距达 16px（行距 52px），用户反馈过宽。
   改为模块不再额外留边、一级行 2px 上下边距 → 模块间 4px、行距 40px。 */
.sidebar .nav > .nav-sec { margin: 0; }
.sidebar .nav > .nav-item, .sidebar .nav > .nav-sec > .nav-item { margin-block: 2px; }
.sidebar .nav > .nav-item, .sidebar .nav > .nav-sec > .nav-item { min-height: 36px; padding-block: 0; }
.sidebar .nav > .nav-sec.open { margin-bottom: var(--space-8); }
.sidebar .nav-sec > .nav-item { font-weight: 500; }
.sidebar .nav-sec.has-active > .nav-item { color: var(--sb-tx-hi); font-weight: 600; background: rgba(255,255,255,.05); }
.sidebar .nav-sub {
  margin: var(--space-4) 0 0 var(--space-20); padding: 0 0 0 var(--space-12);
  border-left: 1px solid rgba(255,255,255,.16);
}
.sidebar .nav-sub .nav-item {
  min-height: 32px; margin: 0; padding: var(--space-4) var(--space-12);
  font-size: var(--text-caption); line-height: var(--leading-body); color: var(--sb-tx); border-radius: var(--r-sm);
}
.sidebar .nav-sub .nav-item > span { line-height: var(--leading-body); }
.sidebar .nav-sub .nav-item:hover { color: var(--sb-tx-hi); background: rgba(255,255,255,.08); }
.sidebar .nav-sub .nav-item.active { color: var(--tx-inv); background: var(--px-brand); font-weight: 600; }
.sidebar .nav-sub .nav-sub { margin-left: var(--space-12); padding-left: var(--space-12); }
/* 收起时保留一级图标，文字和树线仍隐藏。 */
html[data-nav="mini"] .sidebar .nav > .nav-sec { margin: var(--space-4) 0; }
html[data-nav="mini"] .sidebar .nav-item > .nav-ico { display: inline-grid !important; }

/* 行情页：标题、主/子标签与区间工具栏用紧凑层级，给实际行情留出空间。 */
.market-view { --time-sticky-top: var(--top-h); }
.market-view > .page-head { margin-bottom: var(--space-4); gap: var(--space-8) var(--space-16); }
.market-view > .page-head > div:first-child { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; min-width: 0; }
.market-view > .page-head h1 { font-size: var(--text-page-title); line-height: var(--leading-body); }
.market-view > .page-head .sub { font-size: var(--text-caption); line-height: var(--leading-body); margin: 0; max-width: none; color: var(--tx-3); }
.market-view > .page-head .tools .btn { height: 30px; font-size: var(--text-caption); padding: 0 var(--space-12); }
.market-view > .tabs { gap: var(--space-8); margin-bottom: var(--space-8); }
.market-view > .tabs button { font-size: var(--text-secondary); line-height: var(--leading-body); padding: var(--space-8) var(--space-12); }
.market-view #mb .tabs { gap: var(--space-4); margin: 0 0 var(--space-8); }
.market-view #mb .tabs button { font-size: var(--text-caption); line-height: var(--leading-body); padding: var(--space-8) var(--space-12); }
.market-source-status { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-8); }
.market-view .market-source-status .tag { font-size: var(--text-caption); line-height: var(--leading-body); padding: 0 var(--space-8); }
.module-window-label { display: none; }
.market-view .module-window-label { display: inline-flex; align-items: center; white-space: nowrap; gap: var(--space-4); cursor: help; }
.market-view .module-window > .time-note { display: none; }
.market-view [data-module-range] { min-width: 0; }
@media (max-width: 900px) {
  .market-view > .page-head .sub { flex-basis: 100%; }
  .market-view [data-module-range] { flex: 1 1 100%; }
}

/* Compact chrome keeps all existing actions inside a phone viewport. */
@media (max-width: 560px) {
  .topbar, [data-skin="glass"] .topbar { padding-inline: var(--space-8); gap: var(--space-8); }
  .top-actions { gap: var(--space-4); min-width: 0; }
  .topbar .st-chip { max-width: 92px; }
  .topbar .ai-btn { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .topbar .user-chip { padding: var(--space-4); }
}

:root[data-theme="dark"] .sidebar {
  --sb-tx: var(--ink-secondary); --sb-tx-hi: var(--ink-main); --sb-group: var(--ink-muted);
}

/* 用户列表随内容收口，避免 flex 撑出底部空带。 */
.admin-view .user-list { min-height: 0; display: block; padding-bottom: 0; }
.admin-view .user-list > .table-wrap { max-height: none; }