// Active Effects styling - compact and modern design

// Effects container
.effects-container {
  padding: 0.5rem;
}

// Effect categories sections
.effect-category {
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);

  &:last-child {
    margin-bottom: 0;
  }
}

// Effect list styling
.stat-list {
  list-style: none;
  margin: 0;
  padding: 0;

  &.alternate-list {
    .list-item {
      padding: 0.4rem 0.6rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      align-items: center;
      gap: 0.5rem;
      min-height: 32px;

      &.items-title-bg {
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.25),
          rgba(0, 0, 0, 0.15)
        );
        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
        padding: 0.5rem 0.6rem;
        font-weight: bold;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

        h3 {
          margin: 0;
          font-size: 1rem;
          font-family: var(--font-secondary);
          color: rgba(0, 0, 0, 0.9);
          text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
          font-weight: bold;
        }

        .short-label {
          font-size: 0.7rem;
          text-transform: uppercase;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.7);
          letter-spacing: 0.5px;
        }
      }

      &.list-item-shadow {
        transition: all 0.2s ease;
        background: rgba(255, 255, 255, 0.05);

        &:hover {
          background: rgba(255, 255, 255, 0.15);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }
      }

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

// Effect image - compact size
.sheet-competence-img {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.item-name-img {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;

  &:hover .sheet-competence-img {
    border-color: rgba(13, 110, 253, 0.6);
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
  }
}

// Effect labels - compact spacing
.item-name-label-header-long {
  flex: 2;
  display: flex;
  align-items: center;

  .items-title-text {
    font-weight: bold;
  }
}

.item-name-label-long {
  flex: 2;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.9);
  font-size: 0.9rem;
}

.item-field-label-short {
  flex: 0 0 90px;
  font-size: 0.8rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.7);
  font-style: italic;
}

.item-field-label-medium {
  flex: 0 0 100px;
  font-size: 0.8rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.7);
  font-style: italic;
}

// Filler for spacing
.item-filler {
  flex: 1;
  min-width: 10px;
}

// Effect controls - compact and modern
.item-controls {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-shrink: 0;

  &.item-controls-fixed {
    flex: 0 0 auto;
  }

  &.effect-controls {
    gap: 0.25rem;
  }
}

.effect-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8),
    rgba(240, 240, 240, 0.8)
  );
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

  i {
    font-size: 0.85rem;
    margin: 0;
  }

  &:hover {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1),
      rgba(230, 230, 230, 1)
    );
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  &.item-edit:hover {
    background: linear-gradient(
      to bottom,
      rgba(13, 110, 253, 0.2),
      rgba(13, 110, 253, 0.3)
    );
    color: rgba(13, 110, 253, 1);
    border-color: rgba(13, 110, 253, 0.5);
  }

  // New effect button styling
  &[data-action="create-effect"] {
    width: auto;
    padding: 0.3rem 0.5rem;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: linear-gradient(
      to bottom,
      rgba(40, 167, 69, 0.25),
      rgba(40, 167, 69, 0.35)
    );
    border-color: rgba(40, 167, 69, 0.4);
    color: rgba(25, 100, 42, 1);
    text-transform: uppercase;
    letter-spacing: 0.3px;

    &:hover {
      background: linear-gradient(
        to bottom,
        rgba(40, 167, 69, 0.35),
        rgba(40, 167, 69, 0.45)
      );
      border-color: rgba(40, 167, 69, 0.6);
      color: rgba(25, 100, 42, 1);
    }

    i {
      font-size: 0.75rem;
    }
  }

  // Delete button specific styling
  &[data-action="effect-delete"]:hover {
    background: linear-gradient(
      to bottom,
      rgba(220, 53, 69, 0.2),
      rgba(220, 53, 69, 0.3)
    );
    color: rgba(220, 53, 69, 1);
    border-color: rgba(220, 53, 69, 0.5);
  }
}

// Flexrow utility
.flexrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}