/* ============================================================
   xSensus 新 UI — 主样式
   基于 tokens.css 设计变量,深色主题为默认,浅色主题通过
   body.light-theme 切换。
   ============================================================ */

/* ---------- Reset / 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

body {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- SVG 图标通用样式(Lucide) ---------- */
.nav-icon svg,
.nav-caret svg,
.brand-logo svg,
.topbar-toggle svg,
.icon-btn svg,
.topbar-search-icon svg,
.btn svg,
.edit-link svg,
.drawer-close svg,
.go-point-link svg,
.view-row-link svg,
.filter-tag svg,
.sort-control svg,
.page-btn svg,
.motor-tab svg,
.ai-banner-left svg,
.point-status-dot-wrap svg,
.health-dist-icon svg,
.runtime-legend-icon svg,
.empty-cell svg,
.dropdown-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.nav-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-caret svg { width: 12px; height: 12px; }
.brand-logo svg { width: 20px; height: 20px; color: #fff; }
.topbar-toggle svg, .icon-btn svg { width: 18px; height: 18px; }
.topbar-search-icon svg { width: 14px; height: 14px; }
.btn svg { width: 14px; height: 14px; }
.btn-sm svg { width: 12px; height: 12px; }
.drawer-close svg { width: 18px; height: 18px; }

/* ---------- 浅色主题覆盖 ---------- */
body.light-theme {
  background: #F8FAFC;
  color: #131927;
}
body.light-theme .sidebar,
body.light-theme .topbar { background: #FFFFFF; border-color: #E2E8F0; }
body.light-theme .nav-group-title { color: #64748B; }
body.light-theme .nav-item { color: #475569; }
body.light-theme .nav-item:hover { background: #F1F5F9; }
body.light-theme .nav-item.active { background: var(--color-brand-soft); color: var(--color-brand-700); }
body.light-theme .sidebar-footer { border-color: #E2E8F0; }
body.light-theme .topbar-search input { background: #F1F5F9; border-color: #E2E8F0; color: #131927; }
body.light-theme .card,
body.light-theme .panel { background: #FFFFFF; border: 1px solid #E2E8F0; }
body.light-theme .table th { background: #F8FAFC; color: #64748B; }
body.light-theme .table td { border-color: #E2E8F0; }
body.light-theme .table tbody tr:hover { background: #F8FAFC; }
body.light-theme .muted { color: #64748B; }
body.light-theme .topbar-divider { border-color: #E2E8F0; }

/* ============================================================
   App Layout
   ============================================================ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 220px;
  flex: 0 0 220px;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-bg-700);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transition: width 0.2s ease, flex-basis 0.2s ease;
  z-index: var(--z-sticky);
}

.sidebar-brand {
  height: 72px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--color-bg-700);
  flex-shrink: 0;
}
.sidebar-brand .brand-logo-img {
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-md) var(--space-sm);
  min-width: 0;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--color-bg-600); border-radius: 3px; }

.nav-section + .nav-section { margin-top: var(--space-md); }
.nav-group-title {
  font: var(--font-caption-10-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
}
.nav-group-title:first-child { margin-top: 0; }

/* 可折叠分组(含子项) */
.nav-group { margin-bottom: 2px; }
.nav-group > .nav-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.nav-group > .nav-item .nav-caret {
  margin-left: auto;
  transition: transform 0.2s ease;
  font-size: 10px;
  color: var(--color-text-tertiary);
}
.nav-group.expanded > .nav-item .nav-caret { transform: rotate(90deg); }
.nav-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding-left: var(--space-md);
}
.nav-group.expanded > .nav-children { max-height: 5000px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font: var(--font-body-14-regular);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-item:hover { background: var(--color-bg-overlay); color: var(--color-text-primary); }
.nav-item.active {
  background: var(--color-brand-primary);
  color: #fff;
}
.nav-item .nav-icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-tertiary); }
.nav-item:hover .nav-icon { color: var(--color-text-primary); }
.nav-item.active .nav-icon { color: #fff; }
.nav-item .nav-caret { color: var(--color-text-tertiary); display: inline-flex; align-items: center; }

/* ---------- 树形菜单(Factory → Area → Motor → Sensor,4 层) ----------
   结构:.nav-tree > .nav-tree-node > a.nav-tree-item
                                                   + .nav-tree-children > .nav-tree-node ...
   交互:点击整行(含 caret) = 同时展开/折叠 + 跳转;叶子节点仅跳转
-------------------------------------------------------------------------------------------- */
.nav-tree { display: flex; flex-direction: column; gap: 1px; padding: var(--space-xs) 0; overflow: hidden; }
.nav-tree-node { display: flex; flex-direction: column; min-width: 0; }
.nav-tree-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 5px var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font: var(--font-body-14-regular);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
}
.nav-tree-item .nav-icon { color: var(--color-text-tertiary); flex-shrink: 0; }
.nav-tree-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.nav-tree-item:hover { background: var(--color-bg-overlay); color: var(--color-text-primary); }
.nav-tree-item:hover .nav-icon { color: var(--color-text-primary); }
.nav-tree-item.active { background: var(--color-brand-primary); color: #fff; }
.nav-tree-item.active .nav-icon { color: #fff; }

/* caret 图标(内含在 a 中,视觉区分可展开节点) */
.nav-tree-caret {
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.2s ease, color 0.15s ease;
  width: 12px;
  height: 12px;
}
.nav-tree-caret svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-tree-node.expanded > .nav-tree-item .nav-tree-caret { transform: rotate(90deg); }

/* 子节点容器:默认折叠(max-height:0),expanded 时展开 */
.nav-tree-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  display: flex;
  flex-direction: column;
}
.nav-tree-node.expanded > .nav-tree-children { max-height: 3000px; }

/* 层级缩进(depth-0=Factory, depth-1=Area, depth-2=Motor, depth-3=Sensor) */
.nav-tree-node.depth-0 > .nav-tree-item { padding-left: calc(var(--space-xs) + var(--space-md) * 0); }
.nav-tree-node.depth-1 > .nav-tree-item { padding-left: calc(var(--space-xs) + var(--space-md) * 1); }
.nav-tree-node.depth-2 > .nav-tree-item { padding-left: calc(var(--space-xs) + var(--space-md) * 2); }
.nav-tree-node.depth-3 > .nav-tree-item { padding-left: calc(var(--space-xs) + var(--space-md) * 3); }

/* 不同层级图标颜色(让视觉层级更清晰) */
.nav-tree-factory > .nav-tree-item .nav-icon { color: var(--color-brand-400); }
.nav-tree-area > .nav-tree-item .nav-icon { color: var(--color-status-accent); }
.nav-tree-motor > .nav-tree-item .nav-icon { color: var(--color-status-warning); }
.nav-tree-sensor > .nav-tree-item .nav-icon { color: var(--color-text-tertiary); }

/* sensor 叶子节点字号稍小 */
.nav-tree-sensor > .nav-tree-item { font: var(--font-body-12); }

/* 折叠态:隐藏树内容(跟随 .sidebar-collapsed) */
.app-layout.sidebar-collapsed .nav-tree,
.app-layout.sidebar-collapsed .nav-tree-caret { display: none; }

.sidebar-footer {
  border-top: 1px solid var(--color-bg-700);
  padding: var(--space-sm);
  flex-shrink: 0;
}

/* ---------- 折叠态 ---------- */
.app-layout.sidebar-collapsed .sidebar { width: 64px; flex-basis: 64px; }
.app-layout.sidebar-collapsed .sidebar-brand .brand-name,
.app-layout.sidebar-collapsed .nav-group-title,
.app-layout.sidebar-collapsed .nav-item .nav-label,
.app-layout.sidebar-collapsed .nav-item .nav-caret,
.app-layout.sidebar-collapsed .nav-children { display: none; }
.app-layout.sidebar-collapsed .nav-item { justify-content: center; }

/* ---------- Main wrapper ---------- */
.main-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Topbar ---------- */
.topbar {
  height: 72px;
  flex-shrink: 0;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-bg-700);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 0 var(--space-lg);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.topbar-toggle {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-toggle:hover { background: var(--color-bg-overlay); color: var(--color-text-primary); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font: var(--font-body-14-regular);
  color: var(--color-text-tertiary);
  min-width: 0;
}
.breadcrumb a:hover { color: var(--color-text-primary); }
.breadcrumb .crumb-sep { color: var(--color-text-disabled); }
.breadcrumb .crumb-current { color: var(--color-text-primary); font-weight: 500; }
.breadcrumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-search {
  margin-left: auto;
  position: relative;
  width: 280px;
  max-width: 32vw;
  display: flex;
  align-items: center;
}
.topbar-search input {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-md) 0 36px;
  background: var(--color-bg-900);
  border: 1px solid var(--color-bg-700);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font: var(--font-body-14-regular);
  outline: none;
  transition: border-color 0.15s ease;
}
.topbar-search input::placeholder { color: var(--color-text-disabled); }
.topbar-search input:focus { border-color: var(--color-brand-primary); }
.topbar-search-icon {
  position: absolute;
  left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}
.topbar-divider {
  width: 1px; height: 24px;
  background: var(--color-bg-700);
  border: none;
  margin: 0 var(--space-xs);
}
.user-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.user-chip .user-name { font: var(--font-body-14-medium); color: var(--color-text-primary); }
.user-chip .user-role { font: var(--font-caption-10-regular); color: var(--color-text-tertiary); }
.user-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: var(--font-body-12);
  text-transform: uppercase;
}

/* ---------- 用户下拉菜单(hover 触发) ---------- */
.user-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.user-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.user-dropdown-trigger:hover { background: var(--color-bg-overlay); }

.user-dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 180px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-bg-700);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xs) 0;
  display: none;
  z-index: var(--z-dropdown, 1000);
}
.user-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
}
.user-dropdown:hover .user-dropdown-menu { display: block; }

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font: var(--font-body-14-regular);
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.user-dropdown-item:hover {
  background: var(--color-bg-overlay);
  color: var(--color-brand-400);
}
.user-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.icon-btn:hover { background: var(--color-bg-overlay); color: var(--color-text-primary); }

/* 下拉菜单(语言/主题切换) */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  min-width: 160px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-bg-600);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-low);
  padding: var(--space-xs);
  display: none;
  z-index: var(--z-dropdown);
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-item:hover { background: var(--color-bg-overlay); color: var(--color-text-primary); }
.dropdown-item.active { color: var(--color-brand-400); }

/* ---------- Content ---------- */
.content {
  flex: 1;
  padding: var(--space-lg);
  overflow-x: auto;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
  flex-wrap: wrap;
}
.page-title { font: var(--font-heading-20); margin: 0; letter-spacing: var(--tracking-heading); }
.page-subtitle { color: var(--color-text-tertiary); font: var(--font-body-14-regular); margin: var(--space-xs) 0 0; }

/* ============================================================
   通用组件
   ============================================================ */
.card, .panel {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-bg-700);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.card-title { font: var(--font-heading-16); margin: 0 0 var(--space-md); }

.muted { color: var(--color-text-tertiary); font: var(--font-body-14-regular); }

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: 36px;
  padding: 0 var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: var(--font-body-14-medium);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--color-brand-primary); color: #fff; }
.btn-primary:hover { background: var(--color-brand-hover); }
.btn-secondary { background: transparent; color: var(--color-text-secondary); border-color: var(--color-bg-600); }
.btn-secondary:hover { background: var(--color-bg-overlay); color: var(--color-text-primary); }
.btn-primary:active { background: var(--color-brand-active); }
.btn-ghost { background: transparent; border-color: var(--color-bg-600); color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-bg-overlay); color: var(--color-text-primary); }
.btn-sm { height: 28px; padding: 0 var(--space-sm); font: var(--font-body-12); }

/* 表格 */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-bg-700); }
.table {
  width: 100%;
  border-collapse: collapse;
  font: var(--font-body-14-regular);
}
.table th, .table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-bg-700);
}
.table th {
  background: var(--color-bg-900);
  color: var(--color-text-tertiary);
  font: var(--font-label-12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--color-bg-overlay); }
.table a { color: var(--color-brand-400); }
.table a:hover { color: var(--color-brand-300); text-decoration: underline; }

/* 表单 */
.form-field { margin-bottom: var(--space-md); }
.form-field label {
  display: block;
  font: var(--font-label-12);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xs);
}
.input, input[type="text"], input[type="password"], input[type="email"], select {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-md);
  background: var(--color-bg-900);
  border: 1px solid var(--color-bg-700);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font: var(--font-body-14-regular);
  outline: none;
  transition: border-color 0.15s ease;
}
.input::placeholder, input::placeholder { color: var(--color-text-disabled); }
.input:focus, input:focus, select:focus { border-color: var(--color-brand-primary); }

/* 状态徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  font: var(--font-caption-10-medium);
}
.badge-success { background: rgba(25, 217, 96, 0.15); color: var(--color-status-success); }
.badge-warning { background: rgba(255, 166, 16, 0.15); color: var(--color-status-warning); }
.badge-error { background: rgba(245, 82, 82, 0.15); color: var(--color-status-error); }

/* 标签页 tabs */
.tabs {
  display: flex;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--color-bg-700);
  margin-bottom: var(--space-lg);
}
.tab {
  padding: var(--space-sm) var(--space-md);
  font: var(--font-body-14-medium);
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab:hover { color: var(--color-text-primary); }
.tab.active { color: var(--color-brand-400); border-bottom-color: var(--color-brand-primary); }

/* 占位提示 */
.placeholder-box {
  border: 1px dashed var(--color-bg-600);
  border-radius: var(--radius-md);
  padding: var(--space-3xl);
  text-align: center;
  color: var(--color-text-tertiary);
}
.placeholder-box h3 { font: var(--font-heading-16); margin: 0 0 var(--space-sm); color: var(--color-text-secondary); }

/* ============================================================
   登录页
   ============================================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-base);
  padding: var(--space-lg);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-bg-700);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-low);
}
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.login-logo .brand-logo-img {
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.login-card h1 {
  font: var(--font-heading-20);
  text-align: center;
  margin: 0 0 var(--space-xs);
}
.login-card .login-subtitle {
  text-align: center;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-xl);
}
.login-form .form-field { margin-bottom: var(--space-md); }
.login-form label {
  display: block;
  font: var(--font-label-12);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xs);
}
.login-form input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-md);
  background: var(--color-bg-900);
  border: 1px solid var(--color-bg-700);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font: var(--font-body-14-regular);
  outline: none;
  transition: border-color 0.15s ease;
}
.login-form input::placeholder { color: var(--color-text-disabled); }
.login-form input:focus { border-color: var(--color-brand-primary); }
.login-form .btn-primary {
  width: 100%;
  height: 44px;
  margin-top: var(--space-sm);
  font: var(--font-body-14-semibold);
}
.login-error {
  background: rgba(245, 82, 82, 0.12);
  border: 1px solid rgba(245, 82, 82, 0.3);
  color: var(--color-status-error);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font: var(--font-body-14-regular);
  margin-bottom: var(--space-md);
}
.login-hint {
  text-align: center;
  margin-top: var(--space-lg);
  color: var(--color-text-disabled);
  font: var(--font-caption-10-regular);
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform 0.2s ease; }
  .app-layout.sidebar-open .sidebar { transform: translateX(0); }
  .app-layout.sidebar-collapsed .sidebar { width: 220px; flex-basis: 220px; transform: translateX(-100%); }
  .app-layout.sidebar-collapsed.sidebar-open .sidebar { transform: translateX(0); }
  .app-layout.sidebar-collapsed .sidebar-brand .brand-name,
  .app-layout.sidebar-collapsed .nav-group-title,
  .app-layout.sidebar-collapsed .nav-item .nav-label,
  .app-layout.sidebar-collapsed .nav-item .nav-caret,
  .app-layout.sidebar-collapsed .nav-children { display: revert; }
  .app-layout.sidebar-collapsed .nav-item { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .topbar-search { display: none; }
  .user-chip { display: none; }
  .content { padding: var(--space-md); }
}


/* ============================================================
   Modal 弹窗
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 9999);
}
.modal-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-bg-700);
  border-radius: var(--radius-lg);
  width: 400px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-bg-700);
}
.modal-header h3 { margin: 0; font: var(--font-heading-16); }
.modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--color-text-tertiary);
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--color-text-primary); }
.modal-body { padding: var(--space-lg); }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-top: 1px solid var(--color-bg-700);
}
.modal-body .form-field { margin-bottom: var(--space-md); }
.modal-body .form-field label {
  display: block;
  margin-bottom: 4px;
  font: var(--font-label-12);
  color: var(--color-text-secondary);
}
.modal-body .form-field input {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-md);
  background: var(--color-bg-800);
  border: 1px solid var(--color-bg-600);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font: var(--font-body-14-regular);
  box-sizing: border-box;
}
.modal-body .form-field input:focus {
  outline: none;
  border-color: var(--color-brand-400);
}


/* ============================================================
   全局页面切换 Loading 遮罩
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.page-loader.is-active {
  opacity: 1;
  pointer-events: auto;
}
.page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 36px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-bg-600);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.page-loader-ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--color-bg-600);
  border-top-color: var(--color-brand-primary);
  animation: page-loader-spin 0.85s linear infinite;
}
@keyframes page-loader-spin {
  to { transform: rotate(360deg); }
}
.page-loader-text {
  font: var(--font-body-12);
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}