performance-test/src/views/admin/cockpitManage/cockpit-dashboard.scss

/* 驾驶舱：布局 + 主题（全局，勿 scoped，以便作用于子组件） */
.cockpit-dashboard-page {
  --cockpit-th-height: 32px;
  --cockpit-tr-height: 40px;
  --cockpit-td-padding-x: 8px;
  --cockpit-table-stripe-odd: #1a2a4f;
  --cockpit-table-stripe-even: #0f1f3d;
  --cockpit-table-visible-rows: 4;
  --cockpit-table-body-h: calc(
    var(--cockpit-tr-height) * var(--cockpit-table-visible-rows)
  );
  --cockpit-table-block-h: calc(
    var(--cockpit-th-height) + var(--cockpit-table-body-h)
  );
  /* 健康 Tab：环图 + 表格标题 + 4 行表，避免固定过高留白 */
  --cockpit-health-chart-h: 150px;
  --cockpit-health-abnormal-kpi-h: 76px;
  --cockpit-health-abnormal-pane-h: calc(
    32px + var(--cockpit-health-abnormal-kpi-h) + 12px + 34px +
      var(--cockpit-table-block-h)
  );
  --cockpit-health-pane-h: max(
    calc(
      32px + var(--cockpit-health-chart-h) + 8px + 30px +
        var(--cockpit-table-block-h)
    ),
    var(--cockpit-health-abnormal-pane-h)
  );
  /* 入库 Tab：副标题 + 表头 + 4 行表（缩小底部冗余预留） */
  --cockpit-inbound-pane-h: calc(32px + var(--cockpit-table-block-h));

  position: relative;
  width: 100%;
  height: calc(100vh - 60px);
  overflow: hidden;
  background: var(--cockpit-page-bg, #f0f2f5);
  box-sizing: border-box;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .cockpit-dashboard__map {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .cockpit-dashboard__overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    padding: 10px 12px;
    gap: 10px;
    pointer-events: none;
  }

  .cockpit-dashboard__left,
  .cockpit-dashboard__right {
    flex: 0 0 308px;
    width: 308px;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 140, 200, 0.45) transparent;
  }

  .cockpit-dashboard__left::-webkit-scrollbar,
  .cockpit-dashboard__right::-webkit-scrollbar {
    width: 4px;
  }

  .cockpit-dashboard__left::-webkit-scrollbar-thumb,
  .cockpit-dashboard__right::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0, 150, 220, 0.45);
  }

  .cockpit-dashboard__center-spacer {
    flex: 1 1 auto;
    min-width: 0;
    pointer-events: none;
  }

  /* —— 统一面板容器 —— */
  .cockpit-panel {
    flex-shrink: 0;
    border-radius: var(--cockpit-panel-radius, 8px);
    padding: 10px 12px 12px;
    background: var(--cockpit-panel-bg, #ffffff);
    border: 1px solid var(--cockpit-panel-border, #ebeef5);
    color: var(--cockpit-panel-text, #303133);
    box-shadow: var(--cockpit-panel-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));

    &::after {
      display: none !important;
      content: none !important;
    }
  }

  .cockpit-panel--compact {
    padding: 10px 12px;
  }

  /* 面板内标题（含子组件 h3） */
  .cockpit-panel__title,
  .cockpit-panel h3,
  .cockpit-panel .backbone h3,
  .cockpit-panel .BOXYI > h3,
  .cockpit-panel .centeredh3 {
    margin: 0 0 10px;
    padding: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cockpit-panel-title, #303133);
    border-bottom: 1px solid var(--cockpit-panel-divider, #ebeef5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .cockpit-panel .centeredh3 span {
    font-size: 12px;
    font-weight: 400;
    color: var(--cockpit-accent, var(--primary-color, #82780c));
  }

  .cockpit-panel--stats {
    .cockpit-stats__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      line-height: 28px;
      color: var(--cockpit-panel-text, #303133);

      .SpText {
        color: var(--cockpit-panel-muted, #909399);
      }
    }

    .cockpit-stats__switch {
      margin-top: 6px;
      display: flex;
      justify-content: flex-end;
    }

    .el-select,
    .el-input__inner {
      width: 100%;
    }
  }

  /* 子组件根：透明，由面板承载外观 */
  .cockpit-panel .backbone,
  .cockpit-panel .BOXYI,
  .cockpit-panel .BOX {
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    color: inherit !important;
    box-shadow: none !important;
  }

  .cockpit-panel--data-tabs .cockpit-inbound-wrap {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cockpit-panel-divider, #ebeef5);
  }

  /* 表头条（与 el-table thead 同高） */
  .cockpit-panel .titleJQ,
  .cockpit-panel .titleYC,
  .cockpit-panel .cockpit-inbound-table-head {
    margin: 0 0 6px;
    padding: 0 8px;
    min-height: var(--cockpit-th-height);
    height: var(--cockpit-th-height);
    line-height: var(--cockpit-th-height);
    font-size: 12px;
    border-radius: 2px;
    background: var(--cockpit-table-header-bg, #f5f7fa) !important;
    color: var(--cockpit-panel-muted, #909399) !important;
    box-sizing: border-box;
  }

  .cockpit-panel .cockpit-inbound-table-head {
    line-height: normal;
    display: grid;
    align-items: center;
  }

  /* el-table 表头：含 has-gutter 时高度一致 */
  .cockpit-panel .el-table thead th.el-table__cell,
  .cockpit-panel .el-table thead.has-gutter th.el-table__cell,
  .cockpit-panel .el-table thead th.gutter,
  .cockpit-panel .el-table thead.has-gutter th.gutter {
    height: var(--cockpit-th-height) !important;
    padding: 0 4px !important;
    box-sizing: border-box;
  }

  .cockpit-panel .el-table thead.has-gutter tr {
    height: var(--cockpit-th-height) !important;
  }

  .cockpit-panel .el-table thead th.gutter,
  .cockpit-panel .el-table thead.has-gutter th.gutter {
    display: table-cell !important;
    width: 6px !important;
    padding: 0 !important;
    vertical-align: middle;
  }

  .cockpit-panel .el-table thead th .cell {
    line-height: var(--cockpit-th-height);
    height: var(--cockpit-th-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-sizing: border-box;
  }

  .cockpit-panel .el-table thead th.is-left .cell,
  .cockpit-panel .el-table thead th.cockpit-health-col-name .cell {
    justify-content: flex-start;
  }

  /* 表体：固定 4 行高度，两表一致 */
  .cockpit-panel .cockpit-table-block .el-table__body-wrapper {
    max-height: var(--cockpit-table-body-h) !important;
    min-height: var(--cockpit-table-body-h) !important;
    height: var(--cockpit-table-body-h) !important;
    overflow-y: auto !important;
  }

  /* 自动滚动列表：隐藏滚动条，保留 programmatic scroll */
  .cockpit-panel .cockpit-table-block .el-table__body-wrapper,
  .cockpit-panel #Tabtab .el-table__body-wrapper,
  .cockpit-panel .cockpit-unified-table .el-table__body-wrapper {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .cockpit-panel
    .cockpit-table-block
    .el-table__body-wrapper::-webkit-scrollbar,
  .cockpit-panel #Tabtab .el-table__body-wrapper::-webkit-scrollbar,
  .cockpit-panel
    .cockpit-unified-table
    .el-table__body-wrapper::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .cockpit-panel .cockpit-table-block {
    min-height: var(--cockpit-table-block-h);
  }

  .cockpit-panel .cockpit-table-block > .titleYC,
  .cockpit-panel .cockpit-table-block > .cockpit-inbound-table-head {
    margin-bottom: 0 !important;
  }

  .cockpit-panel .cockpit-table-block .cockpit-tabroll-table {
    flex: 1;
    min-height: 0;
  }

  .cockpit-panel .cockpit-table-block .el-table__body tr {
    height: var(--cockpit-tr-height) !important;
  }

  .cockpit-panel .cockpit-table-block .el-table__body td.el-table__cell {
    height: var(--cockpit-tr-height) !important;
    padding: 0 !important;
    box-sizing: border-box;
    border-bottom: none !important;
  }

  .cockpit-inbound-table-wrap.cockpit-table-block {
    display: flex;
    flex-direction: column;
  }

  .cockpit-panel .cockpit-table-block .el-table__body td.el-table__cell .cell {
    line-height: var(--cockpit-tr-height);
    height: var(--cockpit-tr-height);
    display: flex;
    align-items: center;
    padding: 0 var(--cockpit-td-padding-x) !important;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 滚动列表表格 */
  .cockpit-panel #Tabtab.el-table,
  .cockpit-panel #Tabtab .el-table__cell {
    background: transparent !important;
    color: var(--cockpit-panel-text, #606266) !important;
    font-size: 12px;
    border-color: var(--cockpit-panel-divider, #ebeef5) !important;
  }

  .cockpit-panel #Tabtab th.el-table__cell {
    background: var(--cockpit-table-header-bg, #f5f7fa) !important;
    color: var(--cockpit-panel-muted, #909399) !important;
  }

  .cockpit-panel #Tabtab .el-table__row:nth-child(2n) td {
    background: var(--cockpit-table-stripe, #fafafa) !important;
  }

  .cockpit-panel .cockpit-analysis-chart {
    width: 100%;
    height: 160px;
  }

  .cockpit-panel--analysis-history .cockpit-analysis-chart {
    height: 132px;
    margin-top: 4px;
  }

  .cockpit-panel--analysis-history .cockpit-history-block {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cockpit-panel-divider, #ebeef5);
  }

  .cockpit-panel--analysis-history .cockpit-section-title {
    margin-bottom: 8px;
  }

  .cockpit-scroll-table {
    border-radius: 2px;
    overflow: hidden;
  }

  /* 统一列表表（历史 / 健康 / 入库 / 异常） */
  .cockpit-unified-table {
    background: transparent;
  }

  .cockpit-unified-table-head {
    display: grid !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 var(--cockpit-td-padding-x) !important;
    min-height: var(--cockpit-th-height);
    height: var(--cockpit-th-height);
    line-height: var(--cockpit-th-height);
    font-size: 12px;
    font-weight: 500;
    border: none !important;
    border-radius: 0;
    box-sizing: border-box;

    span {
      margin: 0 !important;
      padding: 0;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    span:first-child {
      text-align: left !important;
    }

    &--history {
      grid-template-columns: 28% 38% 34%;
    }

    &--health {
      grid-template-columns: 38% 15% 15% 15% 17%;
    }

    &--inbound-import {
      grid-template-columns: 42% 58%;
    }

    &--inbound-two,
    &--abnormal-two {
      grid-template-columns: 50% 50%;
    }
  }

  .cockpit-unified-table-head--inbound-import .cockpit-inbound-col-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-right: 0;
  }

  .cockpit-unified-table .cockpit-tabroll-table,
  .cockpit-unified-table #Tabtab {
    width: 100% !important;
  }

  .cockpit-unified-table #Tabtab.el-table,
  .cockpit-unified-table #Tabtab::before {
    background: transparent !important;
  }

  .cockpit-unified-table #Tabtab .el-table__body,
  .cockpit-unified-table #Tabtab .el-table__body-wrapper table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  .cockpit-unified-table #Tabtab .el-table__body td.el-table__cell {
    border: none !important;
    color: #ffffff;
    vertical-align: middle;
  }

  .cockpit-unified-table
    #Tabtab
    .el-table__body
    tr:nth-child(odd)
    td.el-table__cell {
    background: var(--cockpit-table-stripe-odd) !important;
    color: #ffffff !important;
  }

  .cockpit-unified-table
    #Tabtab
    .el-table__body
    tr:nth-child(even)
    td.el-table__cell {
    background: var(--cockpit-table-stripe-even) !important;
    color: #ffffff !important;
  }

  .cockpit-unified-table #Tabtab .el-table__body tr:hover > td.el-table__cell {
    background: #182544 !important; /* 稍微加深的蓝色 */
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .cockpit-unified-table #Tabtab .el-table__body td.el-table__cell .cell {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* 表体除第一列外居中 */
  .cockpit-unified-table
    #Tabtab
    .el-table__body
    tr
    td.el-table__cell:not(:first-child)
    .cell {
    justify-content: center !important;
    text-align: center !important;
  }

  .cockpit-unified-table
    #Tabtab
    .el-table__body
    tr
    td.el-table__cell:nth-child(n + 2)
    .cell {
    justify-content: center !important;
    text-align: center !important;
  }

  /* 第一列数据强制左对齐 */
  .cockpit-unified-table
    #Tabtab
    .el-table__body
    td.el-table__cell:first-child
    .cell,
  .cockpit-unified-table #Tabtab .el-table__body tr td:first-child .cell {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* 表头与表体列宽对齐 */
  .cockpit-unified-table--history #Tabtab colgroup col:nth-child(1) {
    width: 28% !important;
  }

  .cockpit-unified-table--history #Tabtab colgroup col:nth-child(2) {
    width: 38% !important;
  }

  .cockpit-unified-table--history #Tabtab colgroup col:nth-child(3) {
    width: 34% !important;
  }

  .cockpit-unified-table--health #Tabtab colgroup col:nth-child(1) {
    width: 38% !important;
  }

  .cockpit-unified-table--health #Tabtab colgroup col:nth-child(2),
  .cockpit-unified-table--health #Tabtab colgroup col:nth-child(3),
  .cockpit-unified-table--health #Tabtab colgroup col:nth-child(4) {
    width: 15% !important;
  }

  .cockpit-unified-table--health #Tabtab colgroup col:nth-child(5) {
    width: 17% !important;
  }

  .cockpit-unified-table--inbound-import #Tabtab colgroup col:nth-child(1) {
    width: 42% !important;
  }

  .cockpit-unified-table--inbound-import #Tabtab colgroup col:nth-child(2) {
    width: 58% !important;
  }

  .cockpit-unified-table--inbound-two #Tabtab colgroup col:nth-child(1),
  .cockpit-unified-table--abnormal-two #Tabtab colgroup col:nth-child(1) {
    width: 50% !important;
  }

  .cockpit-unified-table--inbound-two #Tabtab colgroup col:nth-child(2),
  .cockpit-unified-table--abnormal-two #Tabtab colgroup col:nth-child(2) {
    width: 50% !important;
  }

  .cockpit-section-title {
    margin: 0 0 8px;
    padding: 0;
    border-bottom: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
  }

  .cockpit-panel--stats .cockpit-stats__row {
    line-height: 26px;
  }

  .cockpit-panel--stats .cockpit-stats__switch {
    margin-top: 4px;
  }

  /* 任务统计数字块 */
  .cockpit-panel .BOXsan {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .cockpit-panel .YC01,
  .cockpit-panel .YC02,
  .cockpit-panel .YC03 {
    flex: 1;
    min-width: 0;
  }

  /* Tab 统一样式 */
  .cockpit-panel .el-tabs__header {
    margin: 0 0 10px;
  }

  .cockpit-panel .el-tabs__nav-wrap::after {
    background-color: var(--cockpit-panel-divider, #ebeef5);
  }

  .cockpit-panel .el-tabs__item {
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    color: var(--cockpit-panel-muted, #909399);
    padding: 0 14px;
  }

  .cockpit-panel .el-tabs__item.is-active {
    color: var(--cockpit-accent, var(--primary-color, #82780c));
    font-weight: 600;
  }

  .cockpit-panel .el-tabs__active-bar {
    background-color: var(--cockpit-accent, var(--primary-color, #82780c));
  }

  /* 表单控件 */
  .cockpit-panel .el-input__inner,
  .cockpit-panel .el-range-editor.el-input__inner,
  .cockpit-panel .el-range-input {
    background-color: var(--cockpit-input-bg, #ffffff) !important;
    border-color: var(--cockpit-input-border, #dcdfe6) !important;
    color: var(--cockpit-panel-text, #606266) !important;
  }

  .cockpit-panel .el-date-editor .el-range-separator {
    color: var(--cockpit-panel-muted, #909399) !important;
  }

  .cockpit-panel .el-switch__label {
    color: var(--cockpit-panel-muted, #909399);
  }

  .cockpit-panel .el-switch__label.is-active {
    color: var(--cockpit-accent, var(--primary-color, #82780c)) !important;
  }

  .cockpit-panel--health .cockpit-health-table__head {
    border-bottom: none;
    margin-bottom: 8px;
    padding-bottom: 0;
  }

  .cockpit-inbound-panel {
    width: 100%;
  }

  .cockpit-inbound-body {
    position: relative;
    height: var(--cockpit-inbound-pane-h);
    min-height: var(--cockpit-inbound-pane-h);
    overflow: hidden;
  }

  .cockpit-inbound-pane {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .cockpit-panel--inbound .cockpit-inbound-pane-header {
    margin: 2px 0 6px;
  }

  .cockpit-panel--inbound .cockpit-inbound-subtitle {
    margin: 0;
  }

  .cockpit-inbound-pane .cockpit-inbound-table-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .cockpit-inbound-pane .cockpit-tabroll-table {
    flex: 1;
    min-height: 0;
  }
  .cockpit-inbound-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cockpit-inbound-col-data {
      font-size: 12px;
      color: var(--cockpit-panel-muted, #909399);
      cursor: pointer;
      &:hover {
        color: var(--cockpit-accent, #2979ff) !important;
      }
    }
  }

  .cockpit-inbound-subtitle {
    margin: 8px 0 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cockpit-panel-title, #303133);
  }

  .cockpit-inbound-table-wrap {
    border-radius: 6px;
    overflow: hidden;
  }

  .cockpit-inbound-table-head {
    display: grid !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 10px !important;
    min-height: var(--cockpit-th-height);
    height: var(--cockpit-th-height);
    line-height: normal;
    width: 100%;
    box-sizing: border-box;

    span {
      margin: 0 !important;
      font-size: 12px;
    }

    &--import {
      grid-template-columns: 42% 58%;
    }

    .cockpit-inbound-col-name {
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cockpit-inbound-col-data {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-left: 6px;
      box-sizing: border-box;

      > span:first-child {
        flex: 1;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &--two {
      grid-template-columns: 42% 58%;
    }

    .cockpit-inbound-col-extra {
      text-align: right;
      padding-right: 4px;
    }
  }

  .cockpit-inbound-more-link {
    flex-shrink: 0;
    color: var(--cockpit-accent, #2979ff) !important;
    cursor: pointer;
    text-align: right !important;
  }

  .cockpit-inbound-table-wrap .tabroll-wrap,
  .cockpit-inbound-table-wrap #Tabtab,
  .cockpit-inbound-table-wrap #Tabtab .el-table__body,
  .cockpit-inbound-table-wrap #Tabtab .el-table__body-wrapper,
  .cockpit-inbound-table-wrap #Tabtab table {
    width: 100% !important;
  }

  .cockpit-inbound-table-wrap #Tabtab table {
    table-layout: fixed !important;
  }

  .cockpit-inbound-table-wrap #Tabtab colgroup col:first-child {
    width: 42% !important;
  }

  .cockpit-inbound-table-wrap #Tabtab colgroup col:last-child {
    width: 58% !important;
  }

  .cockpit-panel--inbound .centeredh3 {
    display: none;
  }

  .cockpit-health-table .el-table th.el-table__cell {
    background: var(--cockpit-table-header-bg, #f5f7fa) !important;
    color: var(--cockpit-panel-muted, #909399) !important;
    font-size: 12px;
  }

  .cockpit-health-table .el-table td.el-table__cell {
    background: transparent !important;
    color: var(--cockpit-panel-text, #606266) !important;
    font-size: 12px;
  }
}

/* —— 科技蓝大屏（参考设计稿） —— */
html[data-theme="tech-blue"] .cockpit-dashboard-page {
  --cockpit-page-bg: #020a16;
  --cockpit-panel-border: rgba(0, 90, 140, 0.72);
  --cockpit-panel-divider: rgba(0, 120, 200, 0.22);
  --cockpit-panel-text: #c8e8f8;
  --cockpit-panel-title: #ffffff;
  --cockpit-panel-muted: rgba(168, 210, 235, 0.72);
  --cockpit-panel-radius: 8px;
  --cockpit-table-header-bg: rgba(0, 36, 64, 0.92);
  --cockpit-table-row-bg: rgba(0, 18, 36, 0.55);
  --cockpit-table-row-bg-alt: rgba(0, 24, 46, 0.72);
  --cockpit-input-bg: rgba(0, 16, 32, 0.92);
  --cockpit-input-border: rgba(0, 140, 210, 0.45);
  --cockpit-accent: #00c8ff;
  --cockpit-status-ok: #7ecf51;
  --cockpit-status-warn: #eecb5f;
  --cockpit-status-danger: #e16757;
  --cockpit-kpi-cyan: #5ce1ff;

  background-color: #020a16;
  background-image: radial-gradient(
      ellipse 80% 55% at 50% 38%,
      rgba(12, 40, 88, 0.45) 0%,
      transparent 68%
    ),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;

  .cockpit-dashboard__map {
    filter: saturate(1.12) contrast(1.08) brightness(0.9);
  }

  .cockpit-dashboard__map::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        ellipse 70% 48% at 50% 45%,
        rgba(20, 86, 165, 0.12) 0%,
        rgba(0, 0, 0, 0) 74%
      ),
      linear-gradient(
        180deg,
        rgba(0, 8, 20, 0.26) 0%,
        rgba(0, 8, 20, 0) 18%,
        rgba(0, 8, 20, 0) 82%,
        rgba(0, 8, 20, 0.24) 100%
      );
  }

  .cockpit-dashboard__map::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(0, 235, 255, 0.04) 0,
      rgba(0, 235, 255, 0.04) 1px,
      transparent 1px,
      transparent 4px
    );
    opacity: 0.45;
  }

  .cockpit-dashboard__left,
  .cockpit-dashboard__right {
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .cockpit-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      180deg,
      rgba(6, 22, 45, 0.97) 0%,
      rgba(4, 16, 32, 0.98) 52%,
      rgba(2, 10, 22, 0.99) 100%
    ) !important;
    border: 1px solid var(--cockpit-panel-border) !important;
    border-radius: var(--cockpit-panel-radius) !important;
    box-shadow: inset 0 0 28px rgba(0, 130, 220, 0.1),
      inset 0 1px 0 rgba(0, 210, 255, 0.12), 0 6px 28px rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(12px);

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 6%;
      right: 6%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 242, 255, 0.65),
        transparent
      );
      pointer-events: none;
      z-index: 1;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(0, 186, 255, 0.18),
        inset 0 0 24px rgba(0, 122, 210, 0.14);
      z-index: 1;
    }
  }

  /* section 盒子内部科技填充纹理 */
  .cockpit-panel > * {
    position: relative;
    z-index: 2;
  }

  .cockpit-panel::before,
  .cockpit-panel::after {
    border-radius: inherit;
  }

  .cockpit-panel {
    background-image: linear-gradient(
        115deg,
        rgba(0, 170, 255, 0.09) 0%,
        rgba(0, 170, 255, 0) 34%
      ),
      linear-gradient(
        180deg,
        rgba(0, 255, 255, 0.05) 0%,
        rgba(0, 255, 255, 0) 24%
      ),
      repeating-linear-gradient(
        90deg,
        rgba(0, 210, 255, 0.035) 0,
        rgba(0, 210, 255, 0.035) 1px,
        transparent 1px,
        transparent 18px
      ),
      repeating-linear-gradient(
        0deg,
        rgba(0, 170, 220, 0.028) 0,
        rgba(0, 170, 220, 0.028) 1px,
        transparent 1px,
        transparent 18px
      ),
      linear-gradient(
        180deg,
        rgba(6, 22, 45, 0.97) 0%,
        rgba(4, 16, 32, 0.98) 52%,
        rgba(2, 10, 22, 0.99) 100%
      ) !important;
    background-blend-mode: screen, screen, normal, normal, normal;
  }

  .cockpit-panel__title,
  .cockpit-panel h3,
  .cockpit-panel .backbone h3,
  .cockpit-panel .BOXYI > h3,
  .cockpit-panel .centeredh3 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--cockpit-panel-divider);
    padding: 0 0 8px;
    margin-bottom: 10px;
  }

  .cockpit-panel .centeredh3 span {
    color: #5ec8ff;
    text-shadow: 0 0 10px rgba(86, 200, 255, 0.32);
  }

  .cockpit-panel__title,
  .cockpit-panel h3,
  .cockpit-panel .backbone h3,
  .cockpit-panel .BOXYI > h3,
  .cockpit-panel .centeredh3 {
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.28);
  }

  .cockpit-panel:not(.cockpit-panel--health):not(.cockpit-panel--inbound)
    .el-tabs__item.is-active {
    color: #00d4ff !important;
  }

  .cockpit-panel .el-tabs__active-bar {
    background-color: #00aaff !important;
  }

  /* 统一列表表（科技蓝） */
  .cockpit-unified-table-head {
    background: linear-gradient(
      180deg,
      rgba(0, 36, 72, 0.72) 0%,
      rgba(0, 24, 44, 0.58) 100%
    ) !important;
    color: #ffffff !important;
    box-shadow: inset 0 -1px 0 rgba(0, 190, 255, 0.22);

    span {
      color: #ffffff !important;
      font-weight: 400;
      text-shadow: 0 0 8px rgba(0, 168, 255, 0.22);
    }
  }

  .cockpit-unified-table #Tabtab .el-table__empty-text {
    color: rgba(200, 228, 245, 0.65) !important;
  }

  .cockpit-panel .cockpit-section-title {
    color: #ffffff;
    text-shadow: none;
  }

  /* 接入统计 */
  .cockpit-panel--stats {
    .cockpit-stats__row {
      color: var(--cockpit-panel-text);
      font-size: 13px;

      .SpText {
        color: var(--cockpit-panel-muted);
      }

      > span:last-child {
        color: #fff;
        font-weight: 500;
      }
    }

    .cockpit-stats__legend {
      display: flex;
      gap: 5px;
      margin: 8px 0 6px;
      height: 5px;
    }

    .cockpit-stats__legend-seg {
      flex: 1;
      border-radius: 2px;
      opacity: 0.92;

      &--ok {
        background: var(--cockpit-status-ok);
        box-shadow: 0 0 8px rgba(126, 207, 81, 0.45);
      }

      &--warn {
        background: var(--cockpit-status-warn);
        box-shadow: 0 0 8px rgba(238, 203, 95, 0.4);
      }

      &--danger {
        background: var(--cockpit-status-danger);
        box-shadow: 0 0 8px rgba(225, 103, 87, 0.4);
      }
    }

    .el-select .el-input__inner {
      height: 34px;
      line-height: 34px;
      font-weight: 600;
      color: #fff !important;
      background: var(--cockpit-input-bg) !important;
      border-color: var(--cockpit-input-border) !important;
      box-shadow: inset 0 0 0 1px rgba(0, 150, 220, 0.18),
        0 0 12px rgba(0, 122, 210, 0.08);
    }

    .el-switch__label {
      color: var(--cockpit-panel-muted);
      font-size: 12px;

      &.is-active {
        color: var(--cockpit-kpi-cyan) !important;
      }
    }

    .el-switch__core {
      background: rgba(0, 35, 60, 0.95);
      border-color: rgba(0, 150, 220, 0.5);
    }

    .el-switch.is-checked .el-switch__core {
      border-color: var(--cockpit-accent);
      background-color: rgba(0, 120, 200, 0.85);
      box-shadow: 0 0 14px rgba(0, 190, 255, 0.35);
    }
  }

  /* 分析 + 历史 */
  .cockpit-panel--analysis-history {
    .cockpit-analysis-chart {
      height: 128px;
    }

    .cockpit-history-block {
      border-top-color: var(--cockpit-panel-divider);
    }

    .el-date-editor.el-input__inner {
      width: 100%;
      max-width: none;
      height: 30px;
      font-size: 11px;
      color: var(--cockpit-panel-text) !important;
      background: var(--cockpit-input-bg) !important;
      border-color: var(--cockpit-input-border) !important;
    }

    .el-range-separator,
    .el-range-input {
      color: var(--cockpit-panel-muted) !important;
    }

    .el-input__icon {
      color: var(--cockpit-kpi-cyan) !important;
    }
  }

  /* 任务统计 KPI（L 角描边） */
  .cockpit-panel .cockpit-task-kpi {
    gap: 8px;
    margin-top: 2px;
  }

  .cockpit-panel .cockpit-task-kpi .YC02,
  .cockpit-panel .cockpit-task-kpi .YC03 {
    background-image: none !important;
    width: auto !important;
    flex: 1;
    min-width: 0;
    min-height: 76px;
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
    background: rgba(0, 22, 42, 0.65) !important;
    border: none !important;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 122, 200, 0.55),
      inset 0 0 16px rgba(0, 72, 120, 0.3);
    transition: box-shadow 0.2s;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-color: rgba(0, 210, 255, 0.8);
      border-style: solid;
      pointer-events: none;
    }

    &::before {
      top: 0;
      left: 0;
      border-width: 1px 0 0 1px;
    }

    &::after {
      bottom: 0;
      right: 0;
      border-width: 0 1px 1px 0;
    }

    &:hover {
      box-shadow: inset 0 0 0 1px rgba(0, 200, 255, 0.5),
        0 0 14px rgba(0, 160, 255, 0.18);
    }

    strong {
      font-size: 26px;
      line-height: 1;
      color: var(--cockpit-kpi-cyan);
      text-shadow: 0 0 12px rgba(0, 200, 255, 0.35);
    }

    span {
      font-size: 12px;
      color: var(--cockpit-panel-muted);
    }

    .texyellow {
      color: var(--cockpit-status-warn) !important;
      text-shadow: 0 0 10px rgba(238, 203, 95, 0.35);
    }

    .textred {
      color: var(--cockpit-status-danger) !important;
      text-shadow: 0 0 10px rgba(225, 103, 87, 0.35);
    }
  }

  .cockpit-panel .YC01 strong,
  .cockpit-panel .YC02 strong {
    color: #4bffff;
  }

  .cockpit-panel .YC02 span,
  .cockpit-panel .YC01 span {
    color: rgba(183, 223, 245, 0.85);
  }

  .cockpit-panel--health,
  .cockpit-panel--inbound {
    overflow: visible;
  }

  /* 自定义科技蓝 Tab（CockpitTechTabs） */
  .cockpit-tech-tabs {
    margin-bottom: 10px;
  }

  .cockpit-tech-tabs__track {
    display: flex;
    align-items: flex-end;
    gap: 0;
    min-height: 42px;
    padding: 5px 10px 0;
    background: rgba(0, 4, 12, 0.98);
    border: 1px solid rgba(0, 95, 165, 0.45);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(0, 70, 120, 0.2),
      inset 0 -12px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
  }

  .cockpit-tech-tabs__list {
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-width: 0;
    min-height: 36px;
    position: relative;
    z-index: 1;
  }

  .cockpit-tech-tabs__item {
    flex: 1;
    min-width: 72px;
    height: 34px;
    margin: 0;
    padding: 0 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;

    .cockpit-tech-tabs__label {
      position: relative;
      z-index: 3;
      font-size: 13px;
      line-height: 1;
      color: rgba(170, 205, 230, 0.72);
      transition: color 0.2s;
      pointer-events: none;
      user-select: none;
    }

    &:hover:not(.is-active) .cockpit-tech-tabs__label {
      color: rgba(210, 235, 255, 0.95);
    }

    &.is-active {
      flex: 1.12;
      height: 36px;
      margin-bottom: -1px;

      .cockpit-tech-tabs__label {
        color: #ffffff;
        font-weight: 600;
        text-shadow: 0 0 10px rgba(0, 220, 255, 0.35);
      }
    }
  }

  .cockpit-tech-tabs__shape {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 0;
    top: 0;
    width: 92%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 2px 10px rgba(0, 160, 255, 0.55));
  }

  .cockpit-tech-tabs__baseline {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    z-index: 0;
    background: linear-gradient(
      90deg,
      #00f0ff 0%,
      rgba(0, 190, 255, 0.85) 28%,
      rgba(0, 140, 220, 0.5) 70%,
      rgba(0, 90, 160, 0.25) 100%
    );
    box-shadow: 0 0 12px rgba(0, 230, 255, 0.75), 0 0 4px rgba(0, 255, 255, 0.5);
  }

  .cockpit-tech-tabs__extra {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 8px 8px;
    position: relative;
    z-index: 2;
  }

  .cockpit-tech-tabs__bolt {
    display: none !important;
  }

  .cockpit-tech-tabs__chevron {
    font-size: 14px;
    color: #5ec8ff;
    cursor: pointer;
    text-shadow: 0 0 8px rgba(0, 200, 255, 0.6);

    &:hover {
      color: #9ef8ff;
    }
  }

  /* 右侧统一 Tab：贴顶左对齐（健康 / 入库，图二） */
  .cockpit-panel--health .cockpit-tech-tabs,
  .cockpit-panel--inbound .cockpit-tech-tabs,
  .cockpit-tech-tabs--panel {
    margin-bottom: 6px;
  }

  .cockpit-panel--health .cockpit-tech-tabs--panel,
  .cockpit-panel--inbound .cockpit-tech-tabs--panel,
  .cockpit-tech-tabs--panel {
    .cockpit-tech-tabs__track {
      position: relative;
      min-height: 36px;
      padding: 0 28px 0 0;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
    }

    .cockpit-tech-tabs__list {
      flex: 1;
      justify-content: flex-start;
      gap: 6px;
      min-height: 34px;
    }

    .cockpit-tech-tabs__item {
      flex: 0 0 auto;
      min-width: 64px;
      height: 32px;
      padding: 0 20px;

      &.is-active {
        flex: 0 0 auto;
        height: 34px;
        margin-bottom: 0;

        &::after {
          content: "";
          position: absolute;
          left: 8%;
          right: 8%;
          bottom: 0;
          height: 2px;
          background: #00f0ff;
          box-shadow: 0 0 10px rgba(0, 240, 255, 0.85);
          z-index: 4;
          pointer-events: none;
        }
      }

      &:not(.is-active) .cockpit-tech-tabs__label {
        color: rgba(183, 223, 245, 0.5);
        font-weight: 400;
      }
    }

    .cockpit-tech-tabs__shape {
      left: 0;
      right: 0;
      width: 100%;
      filter: drop-shadow(0 2px 12px rgba(0, 170, 255, 0.5));
    }

    .cockpit-tech-tabs__baseline {
      display: none;
    }

    .cockpit-tech-tabs__extra {
      flex-shrink: 0;
      margin-left: auto;
      padding: 0 0 8px 8px;
      position: static;
      transform: none;
    }
  }

  /* 入库表格：图二深色圆角容器 + 轻斑马纹 */
  .cockpit-panel--inbound .cockpit-inbound-table-wrap {
    border: 1px solid rgba(0, 110, 190, 0.4);
    background: rgba(0, 16, 32, 0.75);
    box-shadow: inset 0 0 16px rgba(0, 40, 80, 0.25);
  }

  .cockpit-panel--inbound .cockpit-inbound-more-link {
    color: rgba(126, 212, 255, 0.95) !important;
    cursor: pointer;
  }

  .cockpit-panel--health .cockpit-health-panel__tab-body {
    height: var(--cockpit-health-pane-h);
    min-height: var(--cockpit-health-pane-h);
  }

  .cockpit-panel--health .cockpit-health-panel__pane--abnormal {
    justify-content: flex-start;
  }

  .cockpit-panel--health
    .cockpit-health-panel__pane--abnormal
    .cockpit-abnormal-panel {
    height: auto;
    flex: 0 0 auto;
  }

  .cockpit-panel--health .cockpit-abnormal-panel__subtitle,
  .cockpit-panel--health .cockpit-abnormal-table__section-head {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(0, 170, 255, 0.2);
  }

  .cockpit-panel--health .cockpit-abnormal-table__section-head {
    background: rgba(0, 52, 96, 0.85);
    border: 1px solid rgba(0, 120, 200, 0.35);
  }

  .cockpit-panel--health .cockpit-abnormal-kpi__card {
    --cockpit-abnormal-kpi-bg: rgba(0, 28, 52, 0.75);
    --cockpit-abnormal-kpi-corner: rgba(0, 210, 255, 0.85);
  }

  .cockpit-panel--health .cockpit-abnormal-kpi__value {
    color: #5ce1ff;
    text-shadow: 0 0 12px rgba(0, 200, 255, 0.35);
  }

  .cockpit-panel--health .cockpit-abnormal-kpi__label {
    color: rgba(190, 215, 235, 0.88);
  }

  .cockpit-health-panel__subtitle,
  .cockpit-inbound-subtitle {
    color: #ffffff;
    font-size: 14px;
    text-shadow: 0 0 8px rgba(0, 170, 255, 0.2);
  }

  .cockpit-panel--health,
  .cockpit-panel--inbound {
    padding-top: 8px;
  }

  .cockpit-panel--health .cockpit-health-panel__subtitle {
    margin-top: 4px;
    padding-right: 4px;
    border-bottom: none;
  }

  .cockpit-panel--inbound .cockpit-inbound-subtitle {
    margin: 6px 0 8px;
    border-bottom: none;
  }
}

/* —— 非科技蓝：浅色统一 —— */
html:not([data-theme="tech-blue"]) .cockpit-dashboard-page {
  --cockpit-page-bg: #eef1f6;
  --cockpit-panel-bg: #ffffff;
  --cockpit-panel-border: #e4e7ed;
  --cockpit-panel-divider: #ebeef5;
  --cockpit-panel-text: #303133;
  --cockpit-panel-title: #303133;
  --cockpit-panel-muted: #909399;
  --cockpit-panel-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --cockpit-panel-radius: 8px;
  --cockpit-table-header-bg: #f5f7fa;
  --cockpit-table-stripe: #fafafa;
  --cockpit-input-bg: #ffffff;
  --cockpit-input-border: #dcdfe6;
  --cockpit-accent: var(--primary-color, #82780c);

  .cockpit-stats__legend {
    display: none;
  }

  .cockpit-panel__title,
  .cockpit-panel h3 {
    border-bottom-color: #ebeef5;
  }

  .cockpit-tech-tabs__track {
    background: #f0f2f5;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    box-shadow: none;
    padding: 4px;
    min-height: 36px;
  }

  .cockpit-tech-tabs__baseline,
  .cockpit-tech-tabs__shape {
    display: none;
  }

  .cockpit-tech-tabs__bolt {
    display: none !important;
  }

  .cockpit-tech-tabs__item {
    height: 32px;
    border-radius: 4px;

    .cockpit-tech-tabs__label {
      color: #909399;
    }

    &.is-active {
      background: #ffffff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

      .cockpit-tech-tabs__label {
        color: var(--primary-color, #82780c);
        font-weight: 600;
        text-shadow: none;
      }
    }
  }

  .cockpit-tech-tabs__chevron {
    color: var(--primary-color, #82780c);
    text-shadow: none;
  }

  .cockpit-panel .cockpit-task-kpi .YC02,
  .cockpit-panel .cockpit-task-kpi .YC03 {
    background-image: none !important;
    width: auto !important;
    flex: 1;
    min-height: 64px;
    margin-top: 0 !important;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    background: #f8fafc !important;
  }

  .cockpit-unified-table-head {
    background: var(--cockpit-table-header-bg) !important;
    color: var(--cockpit-panel-title) !important;

    span {
      color: var(--cockpit-panel-muted) !important;
    }
  }

  .cockpit-unified-table #Tabtab .el-table__body tr:hover > td.el-table__cell {
    background: var(--cockpit-table-stripe) !important;
  }
}