.el-collapse {
  .collapse__title {
    font-weight: 600;
    padding: 0 8px;
    font-size: 1.2em;
    line-height: 1.1em;
  }
  .el-collapse-item__content {
    padding: 0 8px;
  }
}

.el-divider--horizontal {
  margin-bottom: 10px;
  margin-top: 10px;
}

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type='file'] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

.cell {
  .el-tag {
    margin-right: 0px;
  }
}

.small-padding {
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.fixed-width {
  .el-button--mini {
    padding: 7px 10px;
    width: 60px;
  }
}

.status-col {
  .cell {
    padding: 0 10px;
    text-align: center;

    .el-tag {
      margin-right: 0px;
    }
  }
}

/*-------------Dialog-------------**/
.el-overlay {
  overflow: hidden;
  background: var(--app-overlay-mask);
  backdrop-filter: blur(10px);

  .el-overlay-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;

    .el-dialog {
      margin: 0 auto !important;
      border-radius: var(--app-radius-lg);
      box-shadow: var(--app-shadow-md);
      overflow: hidden;
      border: 1px solid var(--app-surface-border);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) padding-box,
        var(--app-surface-bg);

      .el-dialog__header {
        padding: 18px 20px 14px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        margin-right: 0;
        background: var(--app-elevated-soft-bg);
      }

      .el-dialog__title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--app-text-title);
        letter-spacing: 0;
      }

      .el-dialog__headerbtn {
        top: 15px;
        right: 16px;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: var(--app-elevated-close-bg);
        transition:
          background-color 0.2s ease,
          transform 0.2s ease,
          color 0.2s ease;

        .el-dialog__close {
          color: var(--app-text-muted);
          font-size: 16px;
        }

        &:hover {
          background: var(--app-elevated-close-hover-bg);
          transform: translateY(-1px);

          .el-dialog__close {
            color: var(--app-accent-strong);
          }
        }
      }

      .el-dialog__body {
        padding: 18px 20px 12px !important;
      }

      .el-dialog__footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding: 14px 20px 20px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
      }
    }
  }
}

.el-dialog__body {
  max-height: calc(90vh - 111px) !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-dialog__footer .el-button {
  margin-left: 0 !important;
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--app-surface-border);
  background: var(--app-surface-bg);
  box-shadow: var(--app-shadow-md);

  .el-dropdown-menu__item {
    min-height: 36px;
    margin: 2px 0;
    border-radius: 10px;
    color: var(--app-text-title);
    transition:
      background-color 0.2s ease,
      color 0.2s ease;

    &:hover,
    &:focus {
      background: var(--app-accent-soft);
      color: var(--app-accent-strong);
    }
  }

  .el-dropdown-menu__item.is-disabled {
    opacity: 0.5;
  }

  .el-dropdown-menu__item--divided {
    margin-top: 8px;
    position: relative;
    border-top: none;

    &::before {
      left: 2px;
      right: 2px;
      top: -6px;
      width: auto;
      background: rgba(148, 163, 184, 0.14);
    }
  }

  a {
    display: block;
  }
}

// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
  display: inline-flex !important;
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

.el-menu--collapse > div > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
}

.el-dropdown .el-dropdown-link {
  color: var(--el-color-primary) !important;
}

/* 当 el-form 的 inline 属性为 true 时 */
/* 设置 label 的宽度默认为 68px */
.el-form--inline .el-form-item__label {
  width: 68px;
}

/* 设置 el-select 的宽度默认为 240px */
.el-form--inline .el-select {
  width: 240px;
}

/* 设置 el-input 的宽度默认为 240px */
.el-form--inline .el-input {
  width: 240px;
}

.el-form--inline .el-date-editor {
  width: 308px;
}

/* 设置 el-message-box 消息弹框内容强制换行 */
.el-message-box .el-message-box__message {
  word-break: break-word;
}

.el-message-box {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--app-surface-border);
  background: var(--app-surface-bg);
  border-radius: 20px;
  box-shadow: var(--app-shadow-md);

  .el-message-box__header {
    padding: 18px 20px 0;
  }

  .el-message-box__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--app-text-title);
  }

  .el-message-box__headerbtn {
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--app-elevated-close-bg);
    transition:
      background-color 0.2s ease,
      transform 0.2s ease;

    .el-message-box__close {
      color: var(--app-text-muted);
      font-size: 16px;
    }

    &:hover {
      background: var(--app-elevated-close-hover-bg);
      transform: translateY(-1px);

      .el-message-box__close {
        color: var(--app-accent-strong);
      }
    }
  }

  .el-message-box__content {
    padding: 16px 20px 18px;
  }

  .el-message-box__container {
    align-items: flex-start;
    gap: 12px;
  }

  .el-message-box__status {
    position: static;
    margin-top: 1px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    background: var(--app-elevated-soft-bg);
  }

  .el-message-box__message {
    color: var(--app-text-title);
    font-size: 14px;
    line-height: 1.7;
  }

  .el-message-box__btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
  }

  .el-message-box__btns .el-button {
    margin-left: 0;
    min-width: 88px;
  }

  .el-message-box__input {
    padding-top: 2px;
  }
}

.el-message,
.el-notification,
.el-alert {
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-sm);
}

.el-message {
  min-width: 320px;
  padding: 12px 14px;
  border: 1px solid var(--app-surface-border);
  background: var(--app-surface-bg);
  gap: 10px;
  align-items: center;

  .el-message__icon {
    font-size: 18px;
  }

  .el-message__content {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--app-text-title);
  }

  .el-message__closeBtn {
    color: var(--app-text-muted);
    transition: color 0.2s ease;

    &:hover {
      color: var(--app-accent-strong);
    }
  }
}

.el-message--success {
  border-color: var(--el-color-success-light-7);
  background: var(--el-color-success-light-9);
}

.el-message--warning {
  border-color: var(--el-color-warning-light-7);
  background: var(--el-color-warning-light-9);
}

.el-message--error {
  border-color: var(--el-color-danger-light-7);
  background: var(--el-color-danger-light-9);
}

.el-message--info {
  border-color: var(--el-color-primary-light-7);
  background: var(--el-color-primary-light-9);
}

.el-notification {
  width: 340px;
  padding: 16px 18px 16px 16px;
  border: 1px solid var(--app-surface-border);
  background: var(--app-surface-bg);

  .el-notification__group {
    margin-left: 8px;
  }

  .el-notification__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--app-text-title);
  }

  .el-notification__content {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--app-text-muted);
  }

  .el-notification__closeBtn {
    top: 18px;
    color: var(--app-text-muted);
    transition: color 0.2s ease;

    &:hover {
      color: var(--app-accent-strong);
    }
  }
}

.el-notification.right,
.el-notification.left {
  margin-top: 12px;
}

.el-notification--success {
  border-color: var(--el-color-success-light-7);
}

.el-notification--warning {
  border-color: var(--el-color-warning-light-7);
}

.el-notification--error {
  border-color: var(--el-color-danger-light-7);
}

.el-notification--info {
  border-color: var(--el-color-primary-light-7);
}

.el-select__popper.el-popper,
.el-picker__popper.el-popper,
.el-autocomplete__popper.el-popper,
.el-cascader__dropdown,
.el-dropdown__popper.el-popper,
.el-popover.el-popper {
  border: 1px solid var(--app-surface-border);
  background: var(--app-surface-bg);
  box-shadow: var(--app-shadow-md);
}

.el-select__popper.el-popper,
.el-autocomplete__popper.el-popper,
.el-cascader__dropdown,
.el-dropdown__popper.el-popper,
.el-popover.el-popper {
  padding: 8px;
}

.el-select-dropdown__list,
.el-autocomplete-suggestion__list,
.el-cascader-menu {
  padding: 0;
}

.el-select-dropdown__item,
.el-autocomplete-suggestion li,
.el-cascader-node {
  min-height: 38px;
  margin: 2px 0;
  border-radius: 10px;
  color: var(--app-text-title);
  line-height: 38px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover,
.el-autocomplete-suggestion li:hover,
.el-cascader-node:not(.is-disabled):hover,
.el-cascader-node.in-active-path {
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

.el-select-dropdown__item.is-selected,
.el-autocomplete-suggestion li.highlighted {
  background: rgba(64, 158, 255, 0.12);
  color: var(--app-accent-strong);
  font-weight: 600;
}

.el-select-dropdown__item.is-disabled,
.el-cascader-node.is-disabled {
  opacity: 0.5;
}

.el-tree-select__popper .el-tree-node__content {
  display: flex;
  align-items: center;
}

.el-tree-select__popper .el-select-dropdown__item {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 20px;
  height: 20px;
  line-height: 20px;
  margin: 0;
  padding-left: 0;
  background: transparent !important;
}

.el-tree-select__popper .el-tree-node__expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.el-autocomplete-suggestion li {
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.el-autocomplete-suggestion li div {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-cascader-menu {
  min-width: 180px;
  border-right-color: rgba(148, 163, 184, 0.12);
}

.el-cascader-node__prefix,
.el-cascader-node__postfix {
  color: var(--app-text-muted);
}

.el-popper.is-dark {
  border-color: rgba(15, 23, 42, 0.72);
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
}

.el-popper.is-dark .el-popper__arrow::before {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(15, 23, 42, 0.72);
}

.el-popper.is-light {
  border-color: var(--app-surface-border);
  background: var(--app-surface-bg);
}

.el-popper.is-light .el-popper__arrow::before {
  background: var(--app-surface-bg);
  border-color: var(--app-surface-border);
}

.el-picker__popper.el-popper {
  padding: 12px;
}

.el-date-picker,
.el-date-range-picker,
.el-time-panel,
.el-time-range-picker,
.el-picker-panel {
  background: transparent;
  color: var(--app-text-title);
}

.el-picker-panel__body-wrapper,
.el-date-range-picker__content {
  background: transparent;
}

.el-picker-panel__icon-btn,
.el-date-picker__header-label,
.el-date-range-picker__header-label {
  color: var(--app-text-title);
}

.el-date-table td,
.el-month-table td .cell,
.el-year-table td .cell {
  border-radius: 10px;
}

.el-date-table td.today .el-date-table-cell__text,
.el-month-table td.today .cell,
.el-year-table td.today .cell {
  color: var(--app-accent-strong);
  font-weight: 700;
}

.el-date-table td.available:hover,
.el-month-table td .cell:hover,
.el-year-table td .cell:hover {
  color: var(--app-accent-strong);
  background: var(--app-accent-soft);
}

.el-date-table td.current:not(.disabled) .el-date-table-cell__text,
.el-month-table td.current:not(.disabled) .cell,
.el-year-table td.current:not(.disabled) .cell {
  background: var(--app-accent-strong);
  color: #fff;
}

.el-date-editor .el-range-separator {
  color: var(--app-text-muted);
}

.el-time-panel__content::before,
.el-time-panel__content::after {
  border-color: rgba(148, 163, 184, 0.14);
}

.el-scrollbar__thumb {
  background: rgba(148, 163, 184, 0.42);
}

.el-scrollbar__thumb:hover {
  background: rgba(100, 116, 139, 0.56);
}

// Modern rounded inputs
.el-input__wrapper,
.el-textarea__inner,
.el-select__wrapper,
.el-date-editor,
.el-range-editor,
.el-input-number,
.el-input-number__decrease,
.el-input-number__increase {
  border-radius: var(--app-radius-md);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.el-input__wrapper.is-focus,
.el-textarea__inner:focus,
.el-select__wrapper.is-focus,
.el-date-editor.is-focus,
.el-range-editor.is-focus {
  box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
}

// Buttons
.el-button {
  border-radius: var(--app-radius-md);
  transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.el-button:not(.is-text):not(.is-link):hover {
  box-shadow: var(--app-shadow-sm);
}

// Tags and badges
.el-tag {
  border-radius: var(--app-radius-md);
}

// Cards, popovers, drawers
.el-popover,
.el-tooltip__popper,
.el-popper {
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-sm);
}

.el-popover {
  padding: 10px 12px;
}

.el-tooltip__popper {
  max-width: 320px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.el-popconfirm {
  max-width: 320px;
}

.el-popconfirm__main {
  gap: 10px;
  line-height: 1.6;
  color: var(--app-text-title);
}

.el-popconfirm__action {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.el-popconfirm__action .el-button {
  margin-left: 0 !important;
}

.el-drawer {
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-md);
  border: 1px solid var(--app-surface-border);
}

.el-drawer__header {
  margin-bottom: 0;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: var(--app-elevated-soft-bg);
  color: var(--app-text-title);
}

.el-drawer__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--app-text-title);
}

.el-drawer__body {
  padding: 18px 20px 20px;
}

.el-drawer__close-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--app-elevated-close-bg);
  color: var(--app-text-muted);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;

  &:hover {
    background: var(--app-elevated-close-hover-bg);
    color: var(--app-accent-strong);
    transform: translateY(-1px);
  }
}

.el-loading-mask {
  background: rgba(248, 250, 252, 0.76);
  backdrop-filter: blur(4px);
}

.el-loading-spinner .path {
  stroke: var(--app-accent-strong);
}

.el-descriptions {
  --el-descriptions-table-border: rgba(148, 163, 184, 0.14);
}

.el-descriptions__body .el-descriptions__table {
  border-radius: 12px;
  overflow: hidden;
}

.el-descriptions__label.el-descriptions__cell {
  background: var(--app-elevated-soft-bg) !important;
  color: var(--app-text-title);
  font-weight: 600;
}

.el-descriptions__content.el-descriptions__cell {
  color: var(--app-text-title);
}

.el-tree {
  color: var(--app-text-title);
  background: transparent;
}

.el-tree-node__content {
  min-height: 34px;
  margin: 2px 0;
  border-radius: 10px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.el-tree-node__content:hover,
.el-tree-node.is-current > .el-tree-node__content {
  background: var(--app-accent-soft);
}

.el-radio-button__inner,
.el-checkbox-button__inner {
  border-radius: 10px !important;
  box-shadow: none !important;
}

.el-radio-button:first-child .el-radio-button__inner,
.el-checkbox-button:first-child .el-checkbox-button__inner,
.el-radio-button:last-child .el-radio-button__inner,
.el-checkbox-button:last-child .el-checkbox-button__inner {
  border-radius: 10px !important;
}

.el-empty__image {
  opacity: 0.9;
}

.el-empty__description p {
  color: var(--app-text-muted);
}

.el-color-dropdown {
  border-radius: 16px;
  border: 1px solid var(--app-surface-border);
  box-shadow: var(--app-shadow-md);
}

html.dark {
  .el-message--success {
    background: rgba(31, 138, 90, 0.18);
  }

  .el-message--warning {
    background: rgba(184, 121, 34, 0.18);
  }

  .el-message--error {
    background: rgba(178, 74, 74, 0.18);
  }

  .el-message--info {
    background: rgba(43, 107, 211, 0.18);
  }

  .el-loading-mask {
    background: rgba(6, 11, 22, 0.7);
  }

  .el-popper.is-dark {
    border-color: rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.96);
  }

  .el-popper.is-dark .el-popper__arrow::before {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(30, 41, 59, 0.92);
  }
}

// Table polish
.el-table {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--app-surface-border);
}

.el-table__header-wrapper,
.el-table__body-wrapper {
  background: transparent;
}

.el-table__row:hover td.el-table__cell {
  background-color: rgba(53, 109, 255, 0.05) !important;
}

// Tabs
.el-tabs__header {
  margin: 0 0 12px 0;
}

.el-tabs__item {
  border-radius: var(--app-radius-md);
  margin: 0 2px;
}

.el-tabs__nav-wrap::after {
  background-color: var(--el-border-color-lighter);
}

// Pagination
.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pagination .el-pager li {
  border-radius: var(--app-radius-sm);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.el-pagination {
  gap: 6px;
  flex-wrap: wrap;
  color: var(--app-text-muted);
}

.el-pagination .el-pagination__total,
.el-pagination .el-pagination__jump {
  color: var(--app-text-muted);
}

.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pagination .el-pager li,
.el-pagination .el-pagination__sizes .el-input__wrapper {
  min-width: 32px;
  height: 32px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: var(--app-surface-bg);
}

.el-pagination .el-pager li.is-active {
  box-shadow: var(--app-shadow-sm);
}

// Breadcrumb
.el-breadcrumb {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}