/* 全局样式 - 蓝白科技风格 */

/* 重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #f0f5ff;
  min-height: 100vh;
}

/* 页面加载 - 无闪烁，立即显示 */
html, body, #app {
  background: #f0f5ff;
  min-height: 100vh;
}

/* 布局容器 */
.app-wrapper { height: 100vh; background: #f0f5ff; }

/* 侧边栏 */
.app-aside {
  background: linear-gradient(180deg, #1a3a5c 0%, #0d2137 100%);
  transition: width 0.3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.logo-box {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.logo-icon {
  font-size: 24px;
  color: #409eff;
}
.logo-text {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.sidebar-search {
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-search .el-input__wrapper {
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.sidebar-search .el-input__wrapper:hover,
.sidebar-search .el-input__wrapper.is-focus {
  box-shadow: inset 0 0 0 1px rgba(64,158,255,0.75);
}
.sidebar-search .el-input__inner {
  color: #fff;
}
.sidebar-search .el-input__inner::placeholder,
.sidebar-search .el-input__prefix,
.sidebar-search .el-input__suffix {
  color: rgba(255,255,255,0.58);
}

/* 侧边菜单 - 深色主题 */
.side-menu {
  border-right: none !important;
  background: transparent !important;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px 0 12px;
}
.side-menu::-webkit-scrollbar {
  width: 6px;
}
.side-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}
.side-menu::-webkit-scrollbar-track {
  background: transparent;
}
/* 菜单项文字颜色 */
.side-menu .el-menu-item,
.side-menu .el-sub-menu__title {
  color: rgba(255,255,255,0.85) !important;
  height: 44px;
  line-height: 44px;
  background: transparent !important;
}
.side-menu:not(.el-menu--collapse) > .el-sub-menu > .el-sub-menu__title {
  margin-top: 3px;
  font-weight: 600;
  color: rgba(255,255,255,0.92) !important;
}
/* 悬停效果 */
.side-menu .el-menu-item:hover,
.side-menu .el-sub-menu__title:hover {
  background-color: rgba(255,255,255,0.08) !important;
}
/* 选中状态 */
.side-menu .el-menu-item.is-active {
  background: rgba(64,158,255,0.15) !important;
  color: #fff !important;
  border-left: 3px solid #409eff;
}
/* 子菜单 */
.side-menu .el-sub-menu .el-menu {
  background: rgba(0,0,0,0.15) !important;
}
.side-menu .el-sub-menu .el-menu-item {
  padding-left: 50px !important;
  height: 40px;
  line-height: 40px;
  color: rgba(255,255,255,0.75) !important;
}
.side-menu .el-sub-menu .el-menu-item:hover {
  background-color: rgba(255,255,255,0.05) !important;
}
.side-menu .el-sub-menu .el-menu-item.is-active {
  background: rgba(64,158,255,0.15) !important;
  color: #fff !important;
}
/* 展开箭头颜色 */
.side-menu .el-sub-menu__icon-arrow {
  color: rgba(255,255,255,0.6) !important;
}
/* 图标颜色 - 所有菜单图标 */
.side-menu .el-icon,
.side-menu .el-sub-menu__title .el-icon,
.side-menu .el-menu-item .el-icon {
  color: rgba(255,255,255,0.85) !important;
}
.side-menu .el-menu-item.is-active .el-icon {
  color: #409eff !important;
}
/* 子菜单标题图标 */
.el-sub-menu__title .el-sub-menu-icon-exit {
  color: rgba(255,255,255,0.85) !important;
}
.menu-empty {
  margin: 10px 12px 16px;
  padding: 14px 10px;
  color: rgba(255,255,255,0.58);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
}

/* 主容器 */
.main-container {
  background: #f0f5ff;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.app-header {
  height: 56px !important;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.header-left { display: flex; align-items: center; }
.collapse-icon {
  font-size: 20px;
  color: #409eff;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.3s;
}
.collapse-icon:hover { background: #f0f5ff; }
.header-right { display: flex; align-items: center; }
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.user-info:hover { background: #f5f7fa; }
.user-name { font-size: 14px; color: #303133; font-weight: 500; }
.el-avatar {
  background: linear-gradient(135deg, #409eff, #79bbff) !important;
  color: #fff !important;
}

/* 主内容区 */
.app-main {
  position: relative;
  padding: 20px;
  background: #f0f5ff;
  overflow-y: auto;
}

/* 独立填写页：隐藏业务导航，只保留最轻量的账户栏。 */
.app-wrapper.is-focus-mode .main-container {
  width: 100%;
  min-width: 0;
}
.app-wrapper.is-focus-mode .app-header {
  height: 48px !important;
  padding: 0 18px;
}
.app-wrapper.is-focus-mode .app-main {
  padding: 12px 18px 18px;
}

.plugin-route-extensions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 1px solid #d9e8ff;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(64 158 255 / 8%);
}

.plugin-route-extensions__label {
  margin-right: 4px;
  color: #606266;
  font-size: 13px;
  font-weight: 600;
}

/* 页面标题 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

/* 内容卡片 */
.content-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(64,158,255,0.06);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title .el-icon { color: #409eff; }

/* 统计卡片 */
.stat-card {
  border-radius: 12px !important;
  border: 1px solid #e8f4ff !important;
}
.stat-card.clickable { cursor: pointer; transition: all 0.2s; }
.stat-card.clickable:hover { border-color: #409eff; transform: translateY(-2px); }
.stat-card-wrap { display: block; }
.stat-card .el-card__body { padding: 20px; }
.stat-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e8f4ff, #d9e8f6);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
}
.stat-icon .el-icon { font-size: 24px; }
.stat-icon-success { background: linear-gradient(135deg, #e8f9e8, #d4f0d4); color: #67c23a; }
.stat-icon-danger { background: linear-gradient(135deg, #fef0f0, #fde2e2); color: #f56c6c; }
.stat-icon-warning { background: linear-gradient(135deg, #fdf6ec, #faecd8); color: #e6a23c; }
.stat-info { flex: 1; }
.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}
.stat-title { font-size: 14px; color: #909399; display: flex; align-items: center; gap: 4px; }
.stat-title .el-icon { font-size: 12px; }

/* 统计卡片网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 双栏布局 */
.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 1200px) {
  .two-cols { grid-template-columns: 1fr; }
}

/* 主布局 - 左窄右宽 */
.main-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 20px;
}
@media (max-width: 1400px) {
  .main-layout { grid-template-columns: 1fr; }
}
.left-panel { display: flex; flex-direction: column; gap: 20px; }
.right-panel { min-width: 0; }
.detail-card { height: 100%; display: flex; flex-direction: column; }
.detail-card .el-table { flex: 1; }
.record-count { font-size: 13px; color: #909399; }
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
}
.pagination-bar {
  padding: 16px 0 0;
  display: flex;
  justify-content: center;
  border-top: 1px solid #f0f2f5;
  margin-top: 12px;
}
.pagination-bar .el-pagination {
  --el-pagination-button-width: 32px;
  --el-pagination-button-height: 32px;
}
.pagination-bar .el-pagination.is-background .el-pager li {
  border-radius: 6px;
}
.pagination-bar .el-pagination.is-background .el-pager li.is-active {
  background: #409eff;
}

/* 快捷操作 */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.quick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #f0f5ff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #e8f4ff;
}
.quick-btn:hover {
  background: #e8f4ff;
  border-color: #409eff;
}
.quick-btn .el-icon { color: #409eff; }
.quick-btn span { color: #303133; font-weight: 500; }

/* 图表容器 */
.chart-container { height: 300px; }
.chart-container-sm { height: 240px; }

/* 客户信息样式 */
.customer-info { display: flex; flex-direction: column; }
.customer-name { font-size: 13px; color: #303133; font-weight: 500; }
.customer-email { font-size: 11px; color: #909399; margin-top: 2px; }

/* 表格样式 */
.el-table {
  --el-table-border-color: #ebeef5;
  --el-table-header-bg-color: #f5f9ff;
  --el-table-header-text-color: #303133;
}
.el-table th.el-table__cell { font-weight: 600; }