/**
 * ValidationTabs Styles
 */

@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.validation-tabs {
  overflow-y: hidden;
  width: 100%;
  border-radius: 0.25rem;
  box-sizing: border-box;

  &__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
  }

  &__tabs {
    flex: 1;
    
    // Override CapTab styles for proper spacing
    .cap-tab-v2 {
      .ant-tabs-bar {
        padding-right: 0.5rem;
        padding-top: 0.5rem;
      }
      .ant-tabs-nav {
        margin-bottom: 0;
        padding-right: $CAP_SPACE_16;
        
        &::before {
          border-bottom: none; // Remove bottom border
        }

        .ant-tabs-nav-wrap {
          padding-top: 0.429rem;
          margin-left: -0.429rem;
        }
      }

      .ant-tabs-tab {
        padding: 0.5rem 0.75rem; // Add horizontal padding for spacing
        margin-right: 0; // Remove margin, use padding instead

        color: $CAP_G04;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0;
        border-radius: 0.25rem;
        border-bottom: none; // Remove bottom border

        &.ant-tabs-tab {
          margin-left: 1rem; // Add space between tabs
          font-weight: 400;
        }

        &:hover {
          color: $CAP_COLOR_05;
        }

        &.ant-tabs-tab-active {
          color: $FONT_COLOR_01;
          font-weight: 500;

          .ant-tabs-tab-btn {
            color: $FONT_COLOR_01;
            font-weight: 500;
          }
        }
      }

      .ant-tabs-ink-bar {
        display: none; // Hide the ink bar (bottom border indicator)
      }

      .ant-tabs-content-holder {
        padding-top: 0.25rem; // Reduced from 0.5rem
        padding-bottom: 0; // No bottom padding
      }
    }

    .ant-tabs-content {
      margin-top: $CAP_SPACE_08;
    }
  }

  &__tab-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    &--warnings {
      color: $CAP_G01;
    }
  }

  &__tab-count {
    color: inherit;
  }

  &__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-top: 0.5rem;
  }

  &__collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: $CAP_G03;
    transition: all 0.2s ease;

    .cap-icon-v2 {
      font-size: 0.875rem;
    }
  }

  // When collapsed: hide tab content so only header (tabs + arrow) sticks to footer
  &--collapsed {
    .ant-tabs-content-holder,
    .ant-tabs-content,
    .ant-tabs-tabpane {
      display: none !important;
    }
  }

  &__content {
    height: 8rem; // Limit height for many errors
    max-height: 12.5rem;
    overflow-y: auto;
    padding-bottom: 0; // Remove bottom padding completely
    margin-left:2%;

    // Custom scrollbar
    &::-webkit-scrollbar {
      width: 0.375rem;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: $CAP_G06;
      border-radius: 0.1875rem;

      &:hover {
        background-color: $CAP_G04;
      }
    }
  }

  &__item {
    display: flex;
    align-items: flex-start;
    padding: 0.1rem 0.5rem; // Reduced from 0.375rem
    margin-bottom: 3px;

    &:last-child {
      border-bottom: none;
      padding-bottom: 0.25rem; // Minimal padding on last item
    }

    &--error {
      .validation-tabs__icon--error {
        color: $CAP_RED;
      }
      .validation-tabs__item-location,
      .validation-tabs__item-message {
        color: $CAP_RED;
      }
    }

    &--warning {
      .validation-tabs__icon--warning {
        color: $CAP_G01;
      }
      .validation-tabs__item-message {
        color: $CAP_G01;
      }
      .validation-tabs__item-location {
        color: $CAP_G03;
      }
    }
  }

  &__item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  &__icon {
    font-size: 0.875rem;

    &--error {
      color: $CAP_RED;
    }

    &--warning {
      color: $CAP_G01;
    }
  }

  &__item-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: $CAP_G01;
  }

  &__item-message {
    color: $CAP_G01;
  }

  &__item-location {
    color: $CAP_G03;
    white-space: nowrap;
  }

  &__item-rule {
    color: $CAP_G04;
    font-family: monospace;
    font-size: 0.6875rem;
  }

  &__item-navigate {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: $CAP_G04;
    transition: all 0.2s ease;

    .anticon {
      font-size: 1rem; // Increased icon size
    }
  }
}

// Responsive adjustments
@media (max-width: 768px) {
  .validation-tabs {
    padding: 0.375rem 0.5rem;

    &__tabs {
      .ant-tabs-tab {
        margin-right: 1rem;
        font-size: 0.8125rem;
        font-weight: 400;
      }
    }

    &__content {
      max-height: 10rem;
    }

    &__item-content {
      font-size: 0.6875rem;
    }
  }
}
