// 共享详情视图右侧面板样式。
// 在视图特定 SCSS 中导入并使用 mixin 应用公共样式。

@import '../../views/variables';

// 卡片描述共享样式 (任务 & 智能跟单)
@mixin card-description-shared {
  .card-description {
    &-item {
      margin-top: 10px;
      gap: $spacing-sm;
      color: $color-text-primary;
      outline: none;
    }

    &-label {
      color: $color-text-secondary;
      width: 70px;
    }

    &-value {
      &-with-title {
        width: 220px;
        margin-left: $spacing-sm;
      }
    }
  }
}

// 详情视图右侧面板共享样式
@mixin detail-right-panel-shared {
  background-color: $color-bg-light;
  border-radius: $card-border-radius-lg;
  box-shadow: $shadow-card;

  .detail-view-detail-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .detail-view-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    @include hide-scrollbar;
  }

  .detail-view-detail-content-header {
    padding: 16px 16px 0;

    .detail-view-detail-title {
      gap: $spacing-sm;
      font-size: 16px;
      font-weight: 500;
      color: #000;
    }
  }

  .detail-view-detail-tabs-container {
    padding: 0 16px;
  }

  .cn-tab {
    margin-top: $spacing-sm;
    padding: 0 16px;
  }

  .detail-view-detail-items {
    padding: 12px 12px 55px;
  }

  .detail-view-detail-item {
    padding: 8px 0;

    &:last-child {
      border-bottom: none;
    }
  }

  .detail-view-detail-item-label {
    display: flex;
    align-items: center;
    gap: $spacing-xs;
    color: #000;
    line-height: 22px;
    font-weight: 500;
    font-size: 12px;
    word-break: break-word;
  }

  .detail-view-detail-item-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #999;
  }

  .detail-view-detail-item-value {
    min-width: 0;
    color: #000;
    line-height: 22px;
    font-weight: 500;
    font-size: 12px;
    word-break: break-word;
  }

  .detail-view-detail-operation-placeholder {
    padding: $spacing-lg;
    color: $color-text-secondary;
    font-size: 14px;
    line-height: 22px;
  }

  .detail-view-empty {
    color: $color-text-secondary;
    font-size: 14px;
  }

  .detail-view-navigation {
    flex-shrink: 0;
    padding: 8px 12px;
    gap: $spacing-sm;
    border-top: 1px solid #e7e8ed;
  }

  .detail-view-navigation-left {
    padding: 8px;
    background: rgba(0, 0, 0, 0.03);
    gap: $spacing-sm;
    border-radius: $card-border-radius;
  }

  .detail-view-navigation-right {
    gap: $spacing-xs;
    z-index: 1;
  }

  .detail-view-nav-button {
    gap: $spacing-xs;
    padding: $spacing-xs !important;
    border-radius: $spacing-xs;
    background: $color-bg-white;
    border: 1px solid $color-border-light;
    width: auto !important;
    height: 20px !important;
    line-height: 16px !important;
    font-size: 12px;
    color: $color-text-secondary;

    > img {
      width: 10px !important;
      height: 12px !important;
      min-height: auto !important;
    }

    > span {
      font-size: 12px !important;
      line-height: 16px !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &:disabled {
      color: $color-text-disabled;
      cursor: not-allowed;
    }

    &:not(:disabled):hover {
      color: $color-text-primary;
    }
  }

  .detail-view-operate-cell {
    gap: 0;

    .cn-table-operate {
      gap: 0;
    }

    .cn-table-operate-btn {
      padding: 0 $spacing-sm;
      min-width: auto;
      font-size: 12px;
      color: $color-brand;

      &:hover {
        color: $color-brand-hover;
      }

      &:disabled {
        color: $color-text-disabled;
        cursor: not-allowed;
      }
    }
  }
}
