@import './variables';

:root {
  --bg-primary:    #{$bg-primary};
  --bg-secondary:  #{$bg-secondary};
  --bg-card:       #{$bg-card};
  --bg-panel:      #{$bg-panel};
  --bg-input:      #{$bg-input};
  --border:        #{$border};
  --text-primary:  #{$text-primary};
  --text-secondary:#{$text-secondary};
  --text-muted:    #{$text-muted};
  --accent-green:  #{$accent-green};
  --accent-yellow: #{$accent-yellow};
  --accent-red:    #{$accent-red};
  --accent-cyan:   #{$accent-cyan};
  --sms-teal:      #{$sms-teal};
  --sms-blue:      #{$sms-blue};
  --status-run:    #{$status-run};
  --status-warn:   #{$status-warn};
  --status-fault:  #{$status-fault};
  --font-mono:     #{$font-mono};
  // 向后兼容旧变量名
  --sms-highlight: #{$sms-teal};
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: $font-main;
  background: $bg-base;
  color: $text-primary;
  font-size: 13px;
}

// ─── 卡片 ───
.card {
  background: $bg-card;
  border: 1px solid $border;
  border-radius: 2px;
  overflow: hidden;

  &-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: $bg-panel;
    border-bottom: 1px solid $border;
    border-left: 3px solid $sms-teal;
    font-size: 11px;
    font-weight: 700;
    color: $text-primary;
    letter-spacing: .6px;
    text-transform: uppercase;

    .ch-badge {
      margin-left: auto;
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 1px;
      background: rgba($sms-teal, .12);
      color: $sms-teal;
      border: 1px solid rgba($sms-teal, .3);
      font-weight: 600;
      letter-spacing: .4px;
    }
  }

  &-body { padding: 12px; }
}

// ─── 指标卡 ───
.metric-box {
  background: $bg-panel;
  border: 1px solid $border;
  border-top: 2px solid $sms-teal;
  border-radius: 2px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;

  .mb-label { font-size: 10px; color: $text-secondary; text-transform: uppercase; letter-spacing: .5px; }
  .mb-value {
    font-size: 24px;
    font-family: $font-mono;
    font-weight: 700;
    color: $sms-teal;
    line-height: 1.1;
  }
  .mb-unit { font-size: 10px; color: $text-muted; }
}

// ─── 数据表格 ───
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;

  th {
    background: $bg-secondary;
    color: $text-secondary;
    font-weight: 700;
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid $border-light;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .5px;
  }

  td {
    padding: 6px 10px;
    border-bottom: 1px solid $border;
    color: $text-primary;
    font-family: $font-mono;
    font-size: 12px;
  }

  tr:hover td { background: rgba($sms-teal, .04); }

  .td-num  { color: $sms-teal; }
  .td-ok   { color: $accent-green; }
  .td-warn { color: $accent-yellow; }
  .td-err  { color: $accent-red; }
  .td-muted{ color: $text-muted; }
}

.table-scroll {
  overflow-x: auto;
  &::-webkit-scrollbar { height: 3px; }
  &::-webkit-scrollbar-thumb { background: $border-light; }
}

// ─── Badge ───
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 1px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;

  &-green  { background: rgba($accent-green, .15); color: $accent-green; border-left: 2px solid $accent-green; }
  &-yellow { background: rgba($accent-yellow,.15); color: $accent-yellow; border-left: 2px solid $accent-yellow; }
  &-red    { background: rgba($accent-red, .15);   color: $accent-red;   border-left: 2px solid $accent-red; }
  &-blue   { background: rgba($sms-teal, .15);     color: $sms-teal;     border-left: 2px solid $sms-teal; }
  &-gray   { background: rgba($text-muted, .1);    color: $text-muted;   border-left: 2px solid $text-muted; }
}

// ─── 按钮 ───
.btn {
  padding: 4px 14px;
  border-radius: 2px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
  user-select: none;
  font-family: $font-main;
  letter-spacing: .3px;
  text-transform: uppercase;

  &-primary {
    background: $sms-blue;
    border-color: $sms-blue;
    color: #fff;
    &:hover { background: lighten($sms-blue, 8%); }
    &:disabled { opacity: .5; cursor: not-allowed; }
  }
  &-success {
    background: rgba($accent-green, .12);
    border-color: $accent-green;
    color: $accent-green;
    &:hover { background: rgba($accent-green, .22); }
  }
  &-danger {
    background: rgba($accent-red, .12);
    border-color: $accent-red;
    color: $accent-red;
  }
  &-outline {
    background: transparent;
    border-color: $border-light;
    color: $text-secondary;
    &:hover { border-color: $sms-teal; color: $sms-teal; }
    &:disabled { opacity: .4; cursor: not-allowed; }
  }
  &.fw { width: 100%; }
}

// ─── 输入框 ───
.kv-input {
  background: $bg-input;
  border: 1px solid $border-light;
  border-radius: 2px;
  color: $text-primary;
  font-family: $font-mono;
  font-size: 12px;
  padding: 4px 8px;
  width: 100%;
  outline: none;
  transition: border-color .12s;

  &:focus { border-color: $sms-teal; box-shadow: 0 0 0 1px rgba($sms-teal, .2); }
  &:disabled { opacity: .5; color: $text-muted; }

  &[type="number"] { -moz-appearance: textfield; &::-webkit-inner-spin-button { display: none; } }
}

select.kv-input option { background: $bg-panel; }
textarea.kv-input { resize: vertical; min-height: 64px; }

// ─── KV 参数行 ───
.kv-grid  { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
.kv-label { color: $text-secondary; font-size: 11px; white-space: nowrap; letter-spacing: .2px; }
.kv-value { font-family: $font-mono; font-size: 12px; color: $sms-teal; font-weight: 600; }
.kv-unit  { color: $text-muted; font-size: 10px; }

// ─── 进度条 ───
.prog-bar-wrap { background: $bg-secondary; border-radius: 1px; height: 5px; overflow: hidden; }
.prog-bar-fill { height: 100%; border-radius: 1px; transition: width .4s; }

// ─── 分区标题 ───
.sec-title {
  font-size: 10px;
  font-weight: 700;
  color: $text-muted;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid $border;
}

// ─── Grid helpers ───
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.section-row { display: flex; gap: 12px; > .card { flex: 1; min-width: 0; } }
.flex-row    { display: flex; gap: 10px; align-items: center; }
.flex-col    { display: flex; flex-direction: column; gap: 8px; }
.flex-between{ display: flex; justify-content: space-between; align-items: center; }
.mt8  { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.fw   { width: 100%; }

// ─── Element UI 暗色覆写 ───
.el-loading-mask { background: rgba($bg-card, .7) !important; }
.el-loading-spinner .path { stroke: $sms-teal !important; }

.el-dialog {
  background: $bg-card !important;
  border: 1px solid $border !important;
  border-radius: 2px !important;

  &__header { background: $bg-panel; border-bottom: 1px solid $border; border-left: 3px solid $sms-teal; padding: 10px 14px; }
  &__title { color: $text-primary !important; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
  &__headerbtn .el-dialog__close { color: $text-secondary !important; }
  &__body { background: $bg-card; color: $text-primary; padding: 14px; }
  &__footer { background: $bg-panel; border-top: 1px solid $border; padding: 8px 14px; }
}

.el-form-item__label { color: $text-secondary !important; font-size: 11px; }

.el-input__inner, .el-textarea__inner, .el-select .el-input__inner {
  background: $bg-input !important;
  border-color: $border-light !important;
  border-radius: 2px !important;
  color: $text-primary !important;
  font-family: $font-mono;
  font-size: 12px;
  &:focus { border-color: $sms-teal !important; }
}

.el-select-dropdown {
  background: $bg-panel !important;
  border-color: $border !important;
  border-radius: 2px !important;
  .el-select-dropdown__item { color: $text-secondary; &.selected, &:hover { color: $sms-teal; background: rgba($sms-teal, .08); } }
}

.el-date-editor .el-range-input,
.el-date-editor .el-range-separator { background: transparent !important; color: $text-secondary !important; }

.el-pagination {
  .el-pager li {
    background: $bg-panel; color: $text-secondary; border: 1px solid $border; border-radius: 2px;
    &.active { color: $sms-teal; border-color: $sms-teal; }
  }
  button { background: $bg-panel !important; color: $text-secondary !important; border: 1px solid $border; border-radius: 2px; }
}

.el-radio__label { color: $text-secondary; font-size: 11px; }
.el-radio__inner { background: $bg-input; border-color: $border-light; }
.el-radio__input.is-checked .el-radio__inner { background: $sms-blue; border-color: $sms-blue; }

.el-message-box {
  background: $bg-card !important;
  border-color: $border !important;
  border-radius: 2px !important;
  &__title { color: $text-primary !important; font-size: 12px; }
  &__content { color: $text-secondary !important; }
}
