@charset "UTF-8";

// Legacy SCSS variables (kept for any remaining references)
$default-begin-color: #6366f1;
$default-end-color: #818cf8;
$default-color: #6366f1;
$menu-bg-color: #1e293b;

// ==========================================
// Element Plus Theme Override via CSS Variables
// ==========================================
:root {
  --el-color-primary: var(--color-primary);
  --el-color-primary-light-3: var(--color-primary-light);
  --el-color-primary-dark-2: var(--color-primary-dark);
  --el-color-success: var(--color-success);
  --el-color-warning: var(--color-warning);
  --el-color-danger: var(--color-danger);
  --el-color-info: var(--color-info);
  --el-border-color: var(--color-border);
  --el-border-color-light: var(--color-border-light);
  --el-border-radius-base: var(--radius-sm);
  --el-font-size-base: var(--font-size-base);
  --el-text-color-primary: var(--color-text-primary);
  --el-text-color-regular: var(--color-text-secondary);
  --el-text-color-placeholder: var(--color-text-placeholder);
  --el-bg-color-page: var(--color-bg-page);
}

.default-bg {
  background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-light));
}

// ==========================================
// Element Plus Component Style Normalization
// ==========================================

// ---------- Global ----------
* {
  transition: background-color 0.2s, border-color 0.2s, color 0.15s, box-shadow 0.15s;
}

// ---------- Button ----------
.el-button {
  border-radius: var(--radius-md);
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;

  &:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 1px;
  }

  &--primary {
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
    &:hover, &:focus {
      box-shadow: 0 3px 8px rgba(99, 102, 241, 0.35);
    }
    &:active {
      transform: scale(0.97);
    }
  }

  &--success {
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.3);
  }
  &--warning {
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
  }
  &--danger {
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
  }

  &.is-round {
    border-radius: 999px;
  }

  &.is-circle {
    border-radius: 50%;
  }
}

// ---------- Input / Select / Cascader / DatePicker ----------
.el-input__wrapper,
.el-textarea__inner {
  border-radius: var(--radius-md);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.el-select .el-input__wrapper,
.el-cascader .el-input__wrapper,
.el-date-editor.el-input__wrapper {
  border-radius: var(--radius-md);
}

.el-input-group__append,
.el-input-group__prepend {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.el-input-group__prepend {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

// ---------- Form ----------
.el-form-item__label-wrap {
  margin-left: 5px;
}

.el-form--inline .el-form-item {
  margin-bottom: 10px;
}

.el-form-item__label {
  font-weight: 500;
  color: var(--color-text-secondary);
}

// ---------- Table ----------
.el-table {
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
  overflow: hidden;
  --el-table-bg-color: var(--color-bg-card);
  --el-table-tr-bg-color: var(--color-bg-card);
  --el-table-header-bg-color: var(--color-bg-page);
  --el-table-border-color: var(--color-border);
  background-color: var(--color-bg-card);

  // 所有表头单元格（含左上角索引列表头）
  th.el-table__cell {
    background-color: var(--color-bg-page) !important;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
  }

  // 所有行背景
  tr {
    background-color: var(--color-bg-card) !important;
  }

  // 所有单元格背景继承行
  td.el-table__cell {
    background-color: inherit !important;
  }

  // 斑马纹偶行
  &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: var(--color-bg-page) !important;
  }

  // hover 行
  .el-table__body tr:hover > td.el-table__cell {
    background-color: var(--color-primary-bg) !important;
  }

  // 空数据区
  .el-table__empty-block {
    background-color: var(--color-bg-card);
  }

  // 内部容器
  .el-table__inner-wrapper::before {
    background-color: var(--color-border);
  }

  // 底部横向滚动条加大
  .el-scrollbar__bar.is-horizontal {
    height: 10px;
  }
  .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
    border-radius: 5px;
  }
}

body .el-table th.gutter {
  display: none;
  width: 0;
}

body .el-table colgroup.gutter {
  display: none;
  width: 0;
}

// ---------- Pagination ----------
.el-pagination {
  .el-pager li,
  .btn-prev,
  .btn-next {
    border-radius: var(--radius-sm);
  }

  .el-pager li.is-active {
    font-weight: 600;
  }
}

// ---------- Dialog ----------
.el-dialog {
  border-radius: var(--radius-lg);
  overflow: hidden;

  .el-dialog__header {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border-light);
    margin-right: 0;
  }

  .el-dialog__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
  }

  .el-dialog__headerbtn {
    top: var(--spacing-lg);
    right: var(--spacing-xl);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    &:hover {
      background: var(--color-border-light);
    }
  }

  .el-dialog__body {
    padding: var(--spacing-xl);
  }

  .el-dialog__footer {
    padding: var(--spacing-md) var(--spacing-xl);
    border-top: 1px solid var(--color-border-light);
  }
}

// ---------- Drawer ----------
.el-drawer {
  .el-drawer__header {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border-light);
  }

  .el-drawer__body {
    padding: var(--spacing-xl);
  }

  .el-drawer__footer {
    padding: var(--spacing-md) var(--spacing-xl);
    border-top: 1px solid var(--color-border-light);
  }
}

// ---------- Tag ----------
.el-tag {
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.el-tag--round {
  border-radius: 999px;
}

// ---------- Menu ----------
.el-menu {
  border-right: none;
  border-bottom: none;
}

// ---------- Tabs ----------
.el-tabs__item {
  transition: color 0.2s;
}

// ---------- Popover / Tooltip ----------
.el-popover.el-popper {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.el-tooltip__popper {
  border-radius: var(--radius-sm);
}

// ---------- Dropdown ----------
.el-dropdown-menu {
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) 0;
  box-shadow: var(--shadow-md);
}

.el-dropdown-menu__item {
  border-radius: var(--radius-sm);
  margin: 0 var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: background 0.15s, color 0.15s;
}

// ---------- Message / MessageBox ----------
.el-message {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.el-message-box {
  border-radius: var(--radius-lg);
  overflow: hidden;

  .el-message-box__header {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
  }

  .el-message-box__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
  }

  .el-message-box__btns .el-button {
    border-radius: var(--radius-md);
  }
}

// ---------- Notification ----------
.el-notification {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

// ---------- Card ----------
.el-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
}

// ---------- Tree ----------
.el-tree-node__content {
  border-radius: var(--radius-sm);
  transition: background-color 0.15s;
}

// ---------- Checkbox / Radio ----------
.el-checkbox__inner,
.el-radio__inner {
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.el-radio__inner {
  border-radius: 50%;
}

// ---------- Switch ----------
.el-switch__core {
  border-radius: 999px;
}

// ---------- Skeleton ----------
.el-skeleton__item {
  border-radius: var(--radius-sm);
}

// ---------- Badge ----------
.el-badge__content {
  border-radius: 999px;
}

// ---------- Upload ----------
.el-upload-dragger {
  border-radius: var(--radius-md);
  transition: border-color 0.2s;
}

// ---------- Popover row buttons ----------
.btn-popover {
  min-width: auto;
  border-radius: var(--radius-md);
}

.btn-popover .row-buttons {
  text-align: center;
  background: var(--color-primary-bg);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  transition: background 0.2s;
}

.btn-popover .row-buttons:hover {
  background: var(--color-primary);
}

.btn-popover .row-buttons:hover button {
  color: #fff;
  display: block;
  width: 100%;
  height: 100%;
}

.btn-popover .row-buttons button {
  color: var(--color-primary);
}

.btn-popover .row-button {
  text-align: center;
}

// ---------- Image viewer ----------
.el-image-viewer__wrapper .el-image-viewer__mask {
  background: #fff;
  opacity: 0.8;
}

.el-image-viewer__wrapper > .el-image-viewer__btn.el-image-viewer__close {
  color: #ffffff;
  background-color: var(--color-info);
  border-radius: 50%;
}

// ---------- Loading ----------
.overall-loading .el-loading-text {
  color: rgba(255, 255, 255, 0.76);
}

.overall-loading .el-loading-spinner i {
  color: rgba(255, 255, 255, 0.78);
  font-size: 40px;
}

.el-loading-mask {
  transition: opacity 0.1s;
  z-index: 9999;
}

// ==========================================
// Global Layout Utility Classes
// ==========================================

.main-container {
  background-color: var(--color-bg-card);
  padding: 0 var(--spacing-md);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--page-top-offset));
}

// Unified page container
.page-container {
  padding: var(--spacing-lg);
  background-color: var(--color-bg-card);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--page-top-offset));
}

// Unified search area
.search-area {
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

// Unified table area — fill remaining space
.main-table {
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

// Unified task-box height
.task-box {
  box-sizing: border-box;
  height: calc(100vh - var(--page-top-offset));
  display: flex;
  flex-direction: column;
}

// Search wrapper — no shrink
.grid-right-btn,
.top-screen {
  flex-shrink: 0;
}

// Common page containers — flex column fill
.regional-grid,
.plan-task,
.user-manage {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--page-top-offset));
  box-sizing: border-box;
  background-color: var(--color-bg-card);
  overflow: hidden;
  padding-bottom: 0;
}

// ==========================================
// Form & Search Field Widths
// ==========================================

.screen-item {
  width: 160px;
  display: inline-block;
}

.screen-item .el-input {
  width: 100%;
}

.form-item {
  width: 180px;
}

.form-item .el-input {
  width: 100%;
}

.form-item .el-date-editor.el-input,
.form-item .el-date-editor.el-input__inner {
  width: 100%;
}

.form-tip {
  margin-left: var(--spacing-md);
  color: var(--color-primary);
  cursor: pointer;
}

// ==========================================
// Left-Right Split Layout (tree + table)
// ==========================================

.split-layout {
  display: flex;
  box-sizing: border-box;
  height: calc(100vh - var(--page-top-offset));

  .split-layout-left {
    width: var(--tree-panel-width);
    min-width: var(--tree-panel-width);
    box-sizing: border-box;
    padding: var(--spacing-xl);
    background-color: var(--color-bg-card);
    border-right: 1px solid var(--color-border-light);
    overflow: auto;
  }

  .split-layout-right {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-md);
    background-color: var(--color-bg-card);
    overflow: auto;
  }
}

// ==========================================
// Dialog / Hand-box Styles
// ==========================================

// Dialog form standard spacing (replaces margin-top: -20px hack)
.dialog-form {
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.hand-box .hand-box-title {
  font-weight: bold;
  font-size: 18px;
  line-height: 40px;
  border-bottom: 1px solid var(--color-border-light);
}

.hand-box .hand-box-title > span {
  font-size: var(--font-size-xs);
  color: var(--color-info);
  margin-left: var(--spacing-xl);
}

.hand-box .hand-box-con {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: var(--spacing-md) 0;
}

.hand-box .hand-box-con .handle-item {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  margin-bottom: var(--spacing-md);
}

.hand-box .hand-box-con .handle-item.upload {
  width: 100%;
  flex-wrap: wrap;
}

.hand-box .hand-box-con .handle-item .handle-label {
  width: 120px;
  color: var(--color-text-primary);
}

.hand-box .hand-box-con .handle-item .handle-value {
  color: var(--color-info);
}

.hand-box .hand-box-con .handle-item .upload-item,
.hand-box .hand-box-con .handle-item .img-item {
  width: 120px;
  height: 120px;
}

.hand-box .hand-box-con .handle-item .upload-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  border: 1px dashed var(--color-border-light);
  position: relative;
  cursor: pointer;
}

.hand-box .hand-box-con .handle-item .upload-item > div {
  width: 100%;
  text-align: center;
}

.hand-box .hand-box-con .handle-item .upload-item > span {
  font-size: 24px;
}

.hand-box .hand-box-con .handle-item .upload-item .upload-opity {
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
  opacity: 0;
  z-index: 9;
}

.hand-box .hand-box-con .handle-item .img-item {
  text-align: center;
  margin-left: var(--spacing-xl);
  overflow: hidden;
}

.hand-box .hand-box-con .handle-item .img-item .img-box {
  width: 100%;
  padding: var(--spacing-md);
  box-sizing: border-box;
  position: relative;
}

.hand-box .hand-box-con .handle-item .img-item .img-box img {
  width: 100%;
  height: auto;
}

.hand-box .hand-box-con .handle-item .img-item .img-box span {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  right: 0;
  top: 0;
  border-radius: 50%;
  background-color: var(--color-border-light);
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  z-index: 9;
}

.hand-box .hand-box-con .handle-item .img-item .img-box span:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.qu-dialog {
  position: absolute;
  width: 100%;
  background-color: var(--color-bg-card);
}

.qu-dialog .el-dialog {
  margin: 0;
  width: 100%;
  box-shadow: none;
}
